{"id":1221346,"date":"2026-05-31T22:02:51","date_gmt":"2026-05-31T22:02:51","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/?post_type=wporg-pattern&#038;p=1221346"},"modified":"2026-05-31T22:02:51","modified_gmt":"2026-05-31T22:02:51","slug":"text-timeline-with-numbered-sections","status":"publish","type":"wporg-pattern","link":"https:\/\/wordpress.org\/patterns\/pattern\/text-timeline-with-numbered-sections\/","title":{"rendered":"Text timeline with numbered sections"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-text-color has-background is-layout-constrained wp-container-core-group-is-layout-a494deec wp-block-group-is-layout-constrained\" style=\"color:#F8FAFC;background-color:#0B1020;padding-top:80px;padding-right:24px;padding-bottom:80px;padding-left:24px\">\n<div class=\"wp-block-columns alignwide are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-89078d21 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:42%\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#67E8F9;font-size:13px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase\">How it works<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;margin-top:14px;font-size:56px;font-weight:800;letter-spacing:0;line-height:1\">Explain a process without making it feel heavy.<\/h2>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#CBD5E1;margin-top:24px;font-size:18px;line-height:1.7\">Use this text-only section for onboarding, service process, editorial principles, project phases, course modules, or a simple public roadmap.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:58%\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-979f74b1 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-805e52dd wp-block-group-is-layout-flex\" style=\"border-top-color:#334155;border-top-width:1px;padding-top:24px;padding-bottom:24px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#67E8F9;font-size:48px;font-weight:800;line-height:1\">01<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-3a7eb61e wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:26px;font-weight:800;letter-spacing:0;line-height:1.15\">Start with the decision<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Explain what needs to be decided, approved, learned, changed, or prepared before the next step begins.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-805e52dd wp-block-group-is-layout-flex\" style=\"border-top-color:#334155;border-top-width:1px;padding-top:24px;padding-bottom:24px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#A7F3D0;font-size:48px;font-weight:800;line-height:1\">02<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-3a7eb61e wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:26px;font-weight:800;letter-spacing:0;line-height:1.15\">Make the work visible<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Use this paragraph for method, scope, milestones, expectations, responsibilities, or the logic behind the work.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-805e52dd wp-block-group-is-layout-flex\" style=\"border-top-color:#334155;border-top-width:1px;padding-top:24px;padding-bottom:24px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#FDE68A;font-size:48px;font-weight:800;line-height:1\">03<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-3a7eb61e wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:26px;font-weight:800;letter-spacing:0;line-height:1.15\">Close with a clear outcome<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Tell readers what they will have, know, receive, publish, improve, or be able to do when the process is complete.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-805e52dd wp-block-group-is-layout-flex\" style=\"border-top-color:#334155;border-top-width:1px;border-bottom-color:#334155;border-bottom-width:1px;padding-top:24px;padding-bottom:24px\">\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#C4B5FD;font-size:48px;font-weight:800;line-height:1\">04<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-3a7eb61e wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:26px;font-weight:800;letter-spacing:0;line-height:1.15\">Leave a useful next step<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Add a final note about what readers should review, prepare, bookmark, share, or revisit later.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":9676419,"parent":0,"template":"","meta":{"wpop_keywords":"text, timeline, process, steps, roadmap, onboarding, principles","wpop_description":"A text-only timeline section with large numbered steps, concise headings, and explanatory copy for processes, principles, onboarding, roadmaps, and resource pages.","wpop_viewport_width":1200,"wpop_block_types":[],"wpop_locale":"en_US","wpop_wp_version":"","wpop_contains_block_types":"core\/column,core\/columns,core\/group,core\/heading,core\/paragraph","footnotes":""},"pattern-categories":[3,6],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-1221346","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-columns","wporg-pattern-category-text"],"category_slugs":["columns","text"],"keyword_slugs":[],"pattern_content":"<!-- wp:group {\"align\":\"full\",\"style\":{\"color\":{\"background\":\"#0B1020\",\"text\":\"#F8FAFC\"},\"spacing\":{\"padding\":{\"top\":\"80px\",\"right\":\"24px\",\"bottom\":\"80px\",\"left\":\"24px\"},\"blockGap\":\"48px\"}},\"layout\":{\"type\":\"constrained\",\"contentSize\":\"1180px\"}} -->\n<div class=\"wp-block-group alignfull has-text-color has-background\" style=\"color:#F8FAFC;background-color:#0B1020;padding-top:80px;padding-right:24px;padding-bottom:80px;padding-left:24px\"><!-- wp:columns {\"verticalAlignment\":\"top\",\"align\":\"wide\",\"style\":{\"spacing\":{\"blockGap\":{\"top\":\"32px\",\"left\":\"64px\"}}}} -->\n<div class=\"wp-block-columns alignwide are-vertically-aligned-top\"><!-- wp:column {\"verticalAlignment\":\"top\",\"width\":\"42%\"} -->\n<div class=\"wp-block-column is-vertically-aligned-top\" style=\"flex-basis:42%\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"13px\",\"fontWeight\":\"800\",\"letterSpacing\":\"0.08em\",\"textTransform\":\"uppercase\"},\"color\":{\"text\":\"#67E8F9\"}}} -->\n<p class=\"has-text-color\" style=\"color:#67E8F9;font-size:13px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase\">How it works<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"style\":{\"typography\":{\"fontSize\":\"56px\",\"fontWeight\":\"800\",\"lineHeight\":\"1\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#FFFFFF\"},\"spacing\":{\"margin\":{\"top\":\"14px\"}}}} -->\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;margin-top:14px;font-size:56px;font-weight:800;letter-spacing:0;line-height:1\">Explain a process without making it feel heavy.<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"18px\",\"lineHeight\":\"1.7\"},\"color\":{\"text\":\"#CBD5E1\"},\"spacing\":{\"margin\":{\"top\":\"24px\"}}}} -->\n<p class=\"has-text-color\" style=\"color:#CBD5E1;margin-top:24px;font-size:18px;line-height:1.7\">Use this text-only section for onboarding, service process, editorial principles, project phases, course modules, or a simple public roadmap.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"top\",\"width\":\"58%\"} -->\n<div class=\"wp-block-column is-vertically-aligned-top\" style=\"flex-basis:58%\"><!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"0\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\"><!-- wp:group {\"style\":{\"border\":{\"top\":{\"color\":\"#334155\",\"width\":\"1px\"}},\"spacing\":{\"padding\":{\"top\":\"24px\",\"bottom\":\"24px\"},\"blockGap\":\"20px\"}},\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\",\"verticalAlignment\":\"top\"}} -->\n<div class=\"wp-block-group\" style=\"border-top-color:#334155;border-top-width:1px;padding-top:24px;padding-bottom:24px\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"48px\",\"fontWeight\":\"800\",\"lineHeight\":\"1\"},\"color\":{\"text\":\"#67E8F9\"}}} -->\n<p class=\"has-text-color\" style=\"color:#67E8F9;font-size:48px;font-weight:800;line-height:1\">01<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"8px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\"><!-- wp:heading {\"level\":3,\"style\":{\"typography\":{\"fontSize\":\"26px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.15\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#FFFFFF\"}}} -->\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:26px;font-weight:800;letter-spacing:0;line-height:1.15\">Start with the decision<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"16px\",\"lineHeight\":\"1.65\"},\"color\":{\"text\":\"#CBD5E1\"}}} -->\n<p class=\"has-text-color\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Explain what needs to be decided, approved, learned, changed, or prepared before the next step begins.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"style\":{\"border\":{\"top\":{\"color\":\"#334155\",\"width\":\"1px\"}},\"spacing\":{\"padding\":{\"top\":\"24px\",\"bottom\":\"24px\"},\"blockGap\":\"20px\"}},\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\",\"verticalAlignment\":\"top\"}} -->\n<div class=\"wp-block-group\" style=\"border-top-color:#334155;border-top-width:1px;padding-top:24px;padding-bottom:24px\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"48px\",\"fontWeight\":\"800\",\"lineHeight\":\"1\"},\"color\":{\"text\":\"#A7F3D0\"}}} -->\n<p class=\"has-text-color\" style=\"color:#A7F3D0;font-size:48px;font-weight:800;line-height:1\">02<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"8px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\"><!-- wp:heading {\"level\":3,\"style\":{\"typography\":{\"fontSize\":\"26px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.15\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#FFFFFF\"}}} -->\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:26px;font-weight:800;letter-spacing:0;line-height:1.15\">Make the work visible<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"16px\",\"lineHeight\":\"1.65\"},\"color\":{\"text\":\"#CBD5E1\"}}} -->\n<p class=\"has-text-color\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Use this paragraph for method, scope, milestones, expectations, responsibilities, or the logic behind the work.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"style\":{\"border\":{\"top\":{\"color\":\"#334155\",\"width\":\"1px\"}},\"spacing\":{\"padding\":{\"top\":\"24px\",\"bottom\":\"24px\"},\"blockGap\":\"20px\"}},\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\",\"verticalAlignment\":\"top\"}} -->\n<div class=\"wp-block-group\" style=\"border-top-color:#334155;border-top-width:1px;padding-top:24px;padding-bottom:24px\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"48px\",\"fontWeight\":\"800\",\"lineHeight\":\"1\"},\"color\":{\"text\":\"#FDE68A\"}}} -->\n<p class=\"has-text-color\" style=\"color:#FDE68A;font-size:48px;font-weight:800;line-height:1\">03<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"8px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\"><!-- wp:heading {\"level\":3,\"style\":{\"typography\":{\"fontSize\":\"26px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.15\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#FFFFFF\"}}} -->\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:26px;font-weight:800;letter-spacing:0;line-height:1.15\">Close with a clear outcome<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"16px\",\"lineHeight\":\"1.65\"},\"color\":{\"text\":\"#CBD5E1\"}}} -->\n<p class=\"has-text-color\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Tell readers what they will have, know, receive, publish, improve, or be able to do when the process is complete.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"style\":{\"border\":{\"top\":{\"color\":\"#334155\",\"width\":\"1px\"},\"bottom\":{\"color\":\"#334155\",\"width\":\"1px\"}},\"spacing\":{\"padding\":{\"top\":\"24px\",\"bottom\":\"24px\"},\"blockGap\":\"20px\"}},\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\",\"verticalAlignment\":\"top\"}} -->\n<div class=\"wp-block-group\" style=\"border-top-color:#334155;border-top-width:1px;border-bottom-color:#334155;border-bottom-width:1px;padding-top:24px;padding-bottom:24px\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"48px\",\"fontWeight\":\"800\",\"lineHeight\":\"1\"},\"color\":{\"text\":\"#C4B5FD\"}}} -->\n<p class=\"has-text-color\" style=\"color:#C4B5FD;font-size:48px;font-weight:800;line-height:1\">04<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"8px\"}},\"layout\":{\"type\":\"constrained\"}} -->\n<div class=\"wp-block-group\"><!-- wp:heading {\"level\":3,\"style\":{\"typography\":{\"fontSize\":\"26px\",\"fontWeight\":\"800\",\"lineHeight\":\"1.15\",\"letterSpacing\":\"0\"},\"color\":{\"text\":\"#FFFFFF\"}}} -->\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#FFFFFF;font-size:26px;font-weight:800;letter-spacing:0;line-height:1.15\">Leave a useful next step<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":\"16px\",\"lineHeight\":\"1.65\"},\"color\":{\"text\":\"#CBD5E1\"}}} -->\n<p class=\"has-text-color\" style=\"color:#CBD5E1;font-size:16px;line-height:1.65\">Add a final note about what readers should review, prepare, bookmark, share, or revisit later.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:group --><\/div>\n<!-- \/wp:column --><\/div>\n<!-- \/wp:columns --><\/div>\n<!-- \/wp:group -->","favorite_count":1,"author_meta":{"name":"Kamran Abdul Aziz","url":"https:\/\/wordpress.org\/patterns\/author\/ekamran","avatar":"https:\/\/secure.gravatar.com\/avatar\/60e988ec792fd9d57b323806b34dc0166b4f604f5d3fe30a567d3c90be6b01b5?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1221346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1221346\/revisions"}],"predecessor-version":[{"id":1221351,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/1221346\/revisions\/1221351"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/ekamran"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=1221346"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=1221346"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=1221346"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=1221346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}