{"id":2154,"date":"2023-10-10T06:59:52","date_gmt":"2023-10-10T06:59:52","guid":{"rendered":"https:\/\/www.capgemini.com\/help\/?page_id=2154"},"modified":"2023-10-13T09:01:58","modified_gmt":"2023-10-13T09:01:58","slug":"blocks-guide-hero-blocks","status":"publish","type":"page","link":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/","title":{"rendered":"Hero blocks"},"content":{"rendered":"\n
\"\"<\/picture>\"\"<\/picture><\/div>
<\/div>

Which Hero Banner to USe?<\/h1><\/div><\/div><\/div><\/div><\/div>
<\/div><\/div><\/div>\n\n\n\n
\n

Choose the right banner according to the type of page you\u2019re creating.<\/a><\/h3>\n\n\n\n

Reusable Hero Block <\/strong>is one of the most used blocks while creating any content type. There are 7 other hero blocks as well that you can use and some are content-specific, but Hero Reusable is the most versatile block that can fulfil your expectations.<\/p>\n\n\n\n

Most used hero blocks<\/h3><\/div>

<\/p><\/div>

\n

Reusable hero<\/h4><\/div>

This block can be used for client stories, research and insights, resources and events. Apart from this, it can be used as a no-functionality hero block.<\/p>

<\/div>
<\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n

Features and functionalities <\/h4>\n\n\n\n
    \n
  • You can select between the default style or a blue line<\/li>\n\n\n\n
  • Also, if you are creating a client story or research and insights you can always use the the toggle and enable more options<\/li>\n<\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    <\/p>\n\n\n\n

      \n
    • You can enable the client region and sector pane to enter content on the banner (select the blue line if you want the pane to be blue in color)<\/li>\n\n\n\n
    • We can also add primary tags if you are creating a research and insights page<\/li>\n<\/ul>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      <\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      <\/p>\n\n\n\n

        \n
      • Like any other hero block add the hero image using the global library or your own media library <\/li>\n\n\n\n
      • No Char limit for the title<\/strong> <\/li>\n<\/ul>\n
        <\/div><\/div><\/div><\/div><\/div>\n\n\n\n

        Creating premium pages? Use hero bleed banner<\/h4><\/div>

        Block with background image or video to be used as the page banners. This block also supports a menu transparent background and can be used to show the dark or light mode of the menu text over a gradient.<\/p>

        <\/div>
        <\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n

        Features and functionalities <\/h4>\n\n\n\n
          \n
        • There are a lot of toggles that can be used to create different types of banners. We will go through each to understand how that works:\n
            \n
          • You can make the page as homepage with the first toggle<\/li>\n\n\n\n
          • “Show quotes” creates a space on the block to add a quote and you can also add the image of the author<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
            \"\"<\/figure>\n\n\n\n

            <\/p>\n\n\n\n

              \n
            • If you are creating an event the event toggle will let you add the CTA button and link<\/li>\n\n\n\n
            • <\/li>\n<\/ul>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              <\/p>\n\n\n\n

                \n
              • There are options to add the video URL, its button text and video text <\/li>\n\n\n\n
              • <\/li>\n<\/ul>\n\n\n\n
                \"\"<\/figure>\n\n\n\n

                <\/p>\n\n\n\n

                \"\"<\/figure>\n\n\n\n

                <\/p>\n\n\n\n

                  \n
                • You can add hero card to write the title and description <\/li>\n<\/ul>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n

                  <\/p>\n\n\n\n

                    \n
                  • There is an additional purple box which creates a small box underneath the hero block<\/li>\n<\/ul>\n\n\n\n
                    \"\"<\/figure>\n\n\n\n

                    <\/p>\n\n\n\n

                      \n
                    • You can make the title longer with the long text option<\/li>\n\n\n\n
                    • Career fields can be added with a form<\/li>\n<\/ul>\n\n\n\n
                      \"\"<\/figure>\n\n\n\n

                      <\/p>\n\n\n\n

                        \n
                      • There are options to add image\/video to the banner<\/li>\n\n\n\n
                      • Styles can be decided between default\/blue line 1 and 2<\/li>\n\n\n\n
                      • Navigation menu setting is also available to locate the navigation button (if required)<\/li>\n\n\n\n
                      • Title has no char limit on enabling hero banner<\/li>\n<\/ul>\n
                        <\/div><\/div><\/div><\/div><\/div>\n\n\n\n

                        Creating a blog? Use hero blogs<\/h4><\/div>

                        This block features a full-width background video and a title<\/p>

                        <\/div>
                        <\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n

                        Features and functionalities<\/h4>\n\n\n\n
                          \n
                        • You can add an author image to the block<\/li>\n<\/ul>\n\n\n\n
                          \"\"<\/figure>\n\n\n\n
                            \n
                          • This enables the date of the blog automatically which fetches from the publish date<\/li>\n\n\n\n
                          • Lastly, a title can be added<\/li>\n\n\n\n
                          • There is no char limit for the title, but limit to two lines<\/li>\n<\/ul>\n
                            <\/div><\/div><\/div><\/div><\/div>\n\n\n\n

                            Creating homepages? Use hero homepage<\/h4><\/div>

                            This block helps to create a homepage for your website or a menu inside the website<\/p>

                            <\/div>
                            <\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n

                            Features and functionalities<\/h4>\n\n\n\n
                              \n
                            • You can choose between the hero image or a hero video and add them from the global media library or upload them from your system <\/li>\n\n\n\n
                            • The long title toggle helps you have a bigger space for the title<\/li>\n<\/ul>\n\n\n\n
                              \"\"<\/figure>\n\n\n\n
                                \n
                              • The char limit for the heading is 144 <\/li>\n<\/ul>\n
                                <\/div><\/div><\/div><\/div><\/div>\n\n\n\n

                                Creating a profile page? Use hero people<\/h4><\/div>

                                This block is used when you want to introduce an employee in Capgemini that could be varied from the board of directors to experts.<\/p>

                                <\/div>
                                <\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n

                                Features and functionalities<\/h4>\n\n\n\n
                                  \n
                                • You can add an image of the person whom you want to introduce (fixed dimensions)<\/li>\n\n\n\n
                                • You can add the LinkedIn and Twitter links of the employee<\/li>\n<\/ul>\n\n\n\n
                                  \"\"<\/figure>\n\n\n\n
                                    \n
                                  • There is no char limit for the title, heading<\/li>\n<\/ul>\n
                                    <\/div><\/div><\/div><\/div><\/div>\n\n\n\n

                                    Creating a generic page? Use hero picture card<\/h4><\/div>

                                    This is the simplest hero block with title and a text space.<\/p>

                                    <\/div>
                                    <\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n

                                    Features and functionalities<\/h4>\n\n\n\n
                                      \n
                                    • You can choose between default, blue line 1 and blue line 2<\/li>\n\n\n\n
                                    • You can toggle the long title for a better view of the title<\/li>\n<\/ul>\n\n\n\n
                                      \"\"<\/figure>\n\n\n\n
                                        \n
                                      • The group icon can be customised between light and dark<\/li>\n\n\n\n
                                      • Add the hero image that will be available for the hero banner<\/li>\n\n\n\n
                                      • There is no char limit for the title<\/li>\n<\/ul>\n
                                        <\/div><\/div><\/div><\/div><\/div>\n\n\n\n

                                        Creating a press release? Use hero press release <\/h4><\/div>

                                        To create a page to help the audience with latest news of the organization <\/p>

                                        <\/div>
                                        <\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n

                                        Features and functionalities<\/h4>\n\n\n\n
                                          \n
                                        • You can add a title and text to the block with no char limit\n
                                            \n
                                          • There is an option to add the list maximum 3 bullets<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                                          • The banner automatically takes the date of the blocks as per publish date<\/li>\n\n\n\n
                                          • There is an option to add three resources as in the press release <\/li>\n\n\n\n
                                          • There is no option to add background image<\/li>\n<\/ul>\n\n\n\n
                                            \"\"<\/figure>\n
                                            <\/div><\/div><\/div><\/div><\/div>\n\n\n\n

                                            Creating a career landing page? Use hero careers<\/h4><\/div>

                                            This block helps you with your career aspirations, by offering all the job openings that we have at Capgemini<\/p>

                                            <\/div>
                                            <\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n

                                            Features and functionalities<\/h3>\n\n\n\n
                                              \n
                                            • You can select a hero image for the block like any other hero block<\/li>\n\n\n\n
                                            • There is a predefined search button which helps you find the job on the given career page<\/li>\n\n\n\n
                                            • You can always choose between an image and a video for the hero banner <\/li>\n<\/ul>\n\n\n\n
                                              \"\"<\/figure>\n\n\n\n
                                                \n
                                              • The color of the pause icon(if you are opting for video) can be switched between light and dark<\/li>\n\n\n\n
                                              • You can decide on the Capgemini logo which clearly indicates which segment of Capgemini jobs exists on the page<\/li>\n<\/ul>\n\n\n\n
                                                \"\"<\/figure>\n\n\n\n
                                                  \n
                                                • The title has a char limit of 144 <\/li>\n<\/ul>\n
                                                  <\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":77,"featured_media":100000960210,"parent":743,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"cg_dt_proposed_to":[],"cg_seo_hreflang_relations":"","cg_seo_canonical_relation":"{\"uuid\":\"a7188f0b-43ef-4b43-8231-aa38540c7740\",\"blogId\":\"\",\"domain\":\"\",\"sitePath\":\"\",\"postLink\":\"\",\"postId\":null,\"isSaved\":true,\"isCrossLink\":false,\"hasCrossLink\":false}","cg_seo_hreflang_x_default_relation":"{\"uuid\":\"84ee6cdc-ab50-4dbd-a925-c2850bc38e8a\",\"blogId\":\"\",\"domain\":\"\",\"sitePath\":\"\",\"postLink\":\"\",\"postId\":null,\"isSaved\":true,\"isCrossLink\":false,\"hasCrossLink\":false}","cg_dt_approved_content":true,"cg_dt_mandatory_content":false,"cg_dt_notes":"","cg_dg_source_changed":false,"cg_dt_link_disabled":false,"_yoast_wpseo_primary_brand":"","footnotes":"","featured_focal_points":"","partner_card_description":"","gsap_animation":0},"brand":[],"partner_type":[],"service":[],"industry":[],"partners":[],"page-type":[],"content-group":[],"class_list":["post-2154","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHero blocks - Capgemini Help documentation<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hero blocks\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/\" \/>\n<meta property=\"og:site_name\" content=\"Capgemini Help documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-13T09:01:58+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/\",\"url\":\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/\",\"name\":\"Hero blocks - Capgemini Help documentation\",\"isPartOf\":{\"@id\":\"https:\/\/www.capgemini.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg\",\"datePublished\":\"2023-10-10T06:59:52+00:00\",\"dateModified\":\"2023-10-13T09:01:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#primaryimage\",\"url\":\"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg\",\"contentUrl\":\"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.capgemini.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks guide\",\"item\":\"https:\/\/www.capgemini.com\/help\/blocks-guide\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Hero blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.capgemini.com\/help\/#website\",\"url\":\"https:\/\/www.capgemini.com\/help\/\",\"name\":\"Capgemini Help documentation\",\"description\":\"Capgemini Help documentation\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.capgemini.com\/help\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hero blocks - Capgemini Help documentation","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Hero blocks","og_url":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/","og_site_name":"Capgemini Help documentation","article_modified_time":"2023-10-13T09:01:58+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/","url":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/","name":"Hero blocks - Capgemini Help documentation","isPartOf":{"@id":"https:\/\/www.capgemini.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#primaryimage"},"image":{"@id":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#primaryimage"},"thumbnailUrl":"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg","datePublished":"2023-10-10T06:59:52+00:00","dateModified":"2023-10-13T09:01:58+00:00","breadcrumb":{"@id":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#primaryimage","url":"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg","contentUrl":"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.capgemini.com\/help\/"},{"@type":"ListItem","position":2,"name":"Blocks guide","item":"https:\/\/www.capgemini.com\/help\/blocks-guide\/"},{"@type":"ListItem","position":3,"name":"Hero blocks"}]},{"@type":"WebSite","@id":"https:\/\/www.capgemini.com\/help\/#website","url":"https:\/\/www.capgemini.com\/help\/","name":"Capgemini Help documentation","description":"Capgemini Help documentation","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.capgemini.com\/help\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"brand_term":[],"parsely":{"version":"1.1.0","canonical_url":"https:\/\/capgemini.com\/help\/blocks-guide\/hero-banners\/","smart_links":{"inbound":0,"outbound":0},"traffic_boost_suggestions_count":0,"meta":{"@context":"https:\/\/schema.org","@type":"WebPage","headline":"Hero blocks","url":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/"},"thumbnailUrl":"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg?w=150&h=150&crop=1","image":{"@type":"ImageObject","url":"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg"},"articleSection":"Uncategorized","author":[],"creator":[],"publisher":{"@type":"Organization","name":"Capgemini Help documentation","logo":""},"keywords":[],"dateCreated":"2023-10-10T06:59:52Z","datePublished":"2023-10-10T06:59:52Z","dateModified":"2023-10-13T09:01:58Z"},"rendered":"<meta name=\"parsely-title\" content=\"Hero blocks\" \/>\n<meta name=\"parsely-link\" content=\"https:\/\/www.capgemini.com\/help\/blocks-guide\/hero-banners\/\" \/>\n<meta name=\"parsely-type\" content=\"index\" \/>\n<meta name=\"parsely-image-url\" content=\"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg?w=150&h=150&crop=1\" \/>\n<meta name=\"parsely-pub-date\" content=\"2023-10-10T06:59:52Z\" \/>\n<meta name=\"parsely-section\" content=\"Uncategorized\" \/>","tracker_url":"https:\/\/cdn.parsely.com\/keys\/capgemini.com\/p.js"},"archive_status":false,"featured_image_src":"https:\/\/www.capgemini.com\/wp-content\/uploads\/2023\/09\/Applied-AI-\u0393Co-a-gamechanger-for-business-operations.jpg","featured_image_alt":"","jetpack_sharing_enabled":true,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Capgemini Help documentation","distributor_original_site_url":"https:\/\/www.capgemini.com\/help","push-errors":false,"_links":{"self":[{"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/pages\/2154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/comments?post=2154"}],"version-history":[{"count":20,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/pages\/2154\/revisions"}],"predecessor-version":[{"id":628004,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/pages\/2154\/revisions\/628004"}],"up":[{"embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/pages\/743"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/media?parent=2154"}],"wp:term":[{"taxonomy":"brand","embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/brand?post=2154"},{"taxonomy":"partner_type","embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/partner_type?post=2154"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/service?post=2154"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/industry?post=2154"},{"taxonomy":"partners","embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/partners?post=2154"},{"taxonomy":"page-type","embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/page-type?post=2154"},{"taxonomy":"content-group","embeddable":true,"href":"https:\/\/www.capgemini.com\/help\/wp-json\/wp\/v2\/content-group?post=2154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}