Toolbar React Component

    Toolbar is a fixed (with Fixed and Through layout types) area at the bottom of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside

    Toolbar React component represents Toolbar component.

    Toolbar Components

    There are following components included:

    • Toolbar

    Toolbar Properties

    PropTypeDefaultDescription
    <Toolbar> properties
    innerbooleantrueWhen enabled (by default), it will put all the content within internal toolbarInner element. Disable it only in case you want to put totally custom layout inside
    positionstringToolbar position, can be top or bottom
    topbooleanTop positioned toolbar. Shortening for position="top"
    topIosbooleanTop positioned toolbar only for iOS theme
    topMdbooleanTop positioned toolbar only for MD theme
    topAurorabooleanTop positioned toolbar only for Aurora theme
    bottombooleanBottom positioned toolbar. Shortening for position="bottom"
    bottomIosbooleanBottom positioned toolbar only for iOS theme
    bottomMdbooleanBottom positioned toolbar only for MD theme
    bottomAurorabooleanBottom positioned toolbar only for Aurora theme
    tabbarbooleanfalseDefines whether the Toolbar is also a Tabbar or not
    labelsbooleanfalseEnables Tabbar with labels (affects only when tabbar: true)
    scrollablebooleanfalseEnables scrollable Tabbar (affects only when tabbar: true)
    noShadowbooleanDisable shadow rendering for Material theme
    noHairlinebooleanfalseDisable toolbar/tabbar top thin border (hairline) for iOS theme
    hiddenbooleanfalseMakes toolbar hidden

    Toolbar Methods

    <Toolbar> methods
    .hide(animate)Hide toolbar
    .show(animate)Show toolbar

    Toolbar Events

    EventDescription
    <Toolbar> events
    toolbarHideEvent will be triggered when Toolbar becomes hidden
    toolbarShowEvent will be triggered when Toolbar becomes visible

    Toolbar Slots

    Toolbar React component (<Toolbar>) has additional slots for custom elements:

    • default - element will be inserted as a child of <div class="toolbarInner"> element
    • beforeInner - element will be inserted right before <div class="toolbarInner"> element
    • afterInner - element will be inserted right after <div class="toolbarInner"> element
    <Toolbar>
      <div slot="beforeInner">Before Inner</div>
      <div slot="afterInner">After Inner</div>
      {/* Goes to default slot: */}
      <Link>Left Link</Link>
      <Link>Right Link</Link>
    </Toolbar>
    
    {/* Renders to: */}
    
    <div class="toolbar">
      <div>Before Inner</div>
      <div class="toolbarInner">
        <a href="#" class="link">Left Link</a>
        <a href="#" class="link">Right Link</a>
      </div>
      <div>After Inner</div>
    </div>
    

    Examples

    Toolbar

    import React, { useState } from 'react';
    import { Page, Navbar, Toolbar, Link, BlockTitle, Block, Button } from 'framework7-react';
    
    export default () => {
      const [isBottom, setIsBottom] = useState(true);
    
      return (
        <Page>
      <Navbar title="Toolbar" backLink="Back"></Navbar>
    
      <Toolbar position={isBottom ? 'bottom' : 'top'}>
        <Link>Left Link</Link>
        <Link>Right Link</Link>
      </Toolbar>
    
      <BlockTitle>Toolbar Position</BlockTitle>
    
      <Block>
        <p>
          Toolbar supports both top and bottom positions. Click the following button to change its
          position.
        </p>
        <p>
          <Button raised onClick={() => setIsBottom(!isBottom)}>
            Toggle Toolbar Position
          </Button>
        </p>
      </Block>
    
      <Block>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
          facilis laudantium voluptates obcaecati officia cum, sit libero commodi...
        </p>
      </Block>
        </Page>
      );
    };

    Tabbar

    import React, { useState } from 'react';
    import { Page, Navbar, Toolbar, Link, Block, NavRight, Tabs, Tab } from 'framework7-react';
    
    export default () => {
      const [isBottom, setIsBottom] = useState(true);
      return (
        <Page pageContent={false}>
      <Navbar title="Tabbar" backLink="Back">
        <NavRight>
          <Link
            iconIos="f7:arrow_up_arrow_down_circle_fill"
            iconAurora="f7:arrow_up_arrow_down_circle_fill"
            iconMd="material:compare_arrows"
            onClick={() => setIsBottom(!isBottom)}
          ></Link>
        </NavRight>
      </Navbar>
    
      <Toolbar tabbar position={isBottom ? 'bottom' : 'top'}>
        <Link tabLink="#tab-1" tabLinkActive>
          Tab 1
        </Link>
        <Link tabLink="#tab-2">Tab 2</Link>
        <Link tabLink="#tab-3">Tab 3</Link>
      </Toolbar>
    
      <Tabs>
        <Tab id="tab-1" className="page-content" tabActive>
          <Block>
            <p>Tab 1 content</p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
              facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
              suscipit temporibus sequi iure ad laboriosam accusamus?
            </p>
            <p>
              Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
              blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus
              sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
              deleniti.
            </p>
            <p>
              Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
              est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet
              unde delectus a maiores nihil dolores? Natus, perferendis.
            </p>
            <p>
              Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
              perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
              ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
            </p>
            <p>
              Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
              ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
              explicabo, unde aliquid impedit! Adipisci!
            </p>
            <p>
              Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
              fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
              accusantium, officiis veniam nostrum cum cumque impedit.
            </p>
            <p>
              Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
              praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
              provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
            </p>
          </Block>
        </Tab>
        <Tab id="tab-2" className="page-content">
          <Block>
            <p>Tab 2 content</p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
              facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
              suscipit temporibus sequi iure ad laboriosam accusamus?
            </p>
            <p>
              Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
              blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus
              sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
              deleniti.
            </p>
            <p>
              Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
              est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet
              unde delectus a maiores nihil dolores? Natus, perferendis.
            </p>
            <p>
              Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
              perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
              ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
            </p>
            <p>
              Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
              ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
              explicabo, unde aliquid impedit! Adipisci!
            </p>
            <p>
              Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
              fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
              accusantium, officiis veniam nostrum cum cumque impedit.
            </p>
            <p>
              Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
              praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
              provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
            </p>
          </Block>
        </Tab>
        <Tab id="tab-3" className="page-content">
          <Block>
            <p>Tab 3 content</p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
              facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
              suscipit temporibus sequi iure ad laboriosam accusamus?
            </p>
            <p>
              Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
              blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus
              sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
              deleniti.
            </p>
            <p>
              Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
              est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet
              unde delectus a maiores nihil dolores? Natus, perferendis.
            </p>
            <p>
              Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
              perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
              ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
            </p>
            <p>
              Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
              ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
              explicabo, unde aliquid impedit! Adipisci!
            </p>
            <p>
              Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
              fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
              accusantium, officiis veniam nostrum cum cumque impedit.
            </p>
            <p>
              Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
              praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
              provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
            </p>
          </Block>
        </Tab>
      </Tabs>
        </Page>
      );
    };

    Tabbar Labels

    import React, { useState } from 'react';
    import { Page, Navbar, Toolbar, Link, Block, NavRight, Tabs, Tab } from 'framework7-react';
    
    export default () => {
      const [isBottom, setIsBottom] = useState(true);
      return (
        <Page pageContent={false}>
      <Navbar title="Tabbar Labels" backLink="Back">
        <NavRight>
          <Link
            iconIos="f7:arrow_up_arrow_down_circle_fill"
            iconAurora="f7:arrow_up_arrow_down_circle_fill"
            iconMd="material:compare_arrows"
            onClick={() => setIsBottom(!isBottom)}
          ></Link>
        </NavRight>
      </Navbar>
    
      <Toolbar tabbar labels position={isBottom ? 'bottom' : 'top'}>
        <Link
          tabLink="#tab-1"
          tabLinkActive
          text="Tab 1"
          iconIos="f7:envelope_fill"
          iconAurora="f7:envelope_fill"
          iconMd="material:email"
        ></Link>
        <Link
          tabLink="#tab-2"
          text="Tab 2"
          iconIos="f7:calendar_fill"
          iconAurora="f7:calendar_fill"
          iconMd="material:today"
        ></Link>
        <Link
          tabLink="#tab-3"
          text="Tab 3"
          iconIos="f7:cloud_upload_fill"
          iconAurora="f7:cloud_upload_fill"
          iconMd="material:file_upload"
        ></Link>
      </Toolbar>
    
      <Tabs>
        <Tab id="tab-1" className="page-content" tabActive>
          <Block>
            <p>Tab 1 content</p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
              facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
              suscipit temporibus sequi iure ad laboriosam accusamus?
            </p>
            <p>
              Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
              blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus
              sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
              deleniti.
            </p>
            <p>
              Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
              est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet
              unde delectus a maiores nihil dolores? Natus, perferendis.
            </p>
            <p>
              Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
              perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
              ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
            </p>
            <p>
              Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
              ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
              explicabo, unde aliquid impedit! Adipisci!
            </p>
            <p>
              Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
              fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
              accusantium, officiis veniam nostrum cum cumque impedit.
            </p>
            <p>
              Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
              praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
              provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
            </p>
          </Block>
        </Tab>
        <Tab id="tab-2" className="page-content">
          <Block>
            <p>Tab 2 content</p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
              facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
              suscipit temporibus sequi iure ad laboriosam accusamus?
            </p>
            <p>
              Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
              blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus
              sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
              deleniti.
            </p>
            <p>
              Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
              est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet
              unde delectus a maiores nihil dolores? Natus, perferendis.
            </p>
            <p>
              Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
              perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
              ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
            </p>
            <p>
              Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
              ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
              explicabo, unde aliquid impedit! Adipisci!
            </p>
            <p>
              Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
              fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
              accusantium, officiis veniam nostrum cum cumque impedit.
            </p>
            <p>
              Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
              praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
              provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
            </p>
          </Block>
        </Tab>
        <Tab id="tab-3" className="page-content">
          <Block>
            <p>Tab 3 content</p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
              facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
              suscipit temporibus sequi iure ad laboriosam accusamus?
            </p>
            <p>
              Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
              blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus
              sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
              deleniti.
            </p>
            <p>
              Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque,
              est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet
              unde delectus a maiores nihil dolores? Natus, perferendis.
            </p>
            <p>
              Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
              perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
              ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
            </p>
            <p>
              Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
              ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
              explicabo, unde aliquid impedit! Adipisci!
            </p>
            <p>
              Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
              fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
              accusantium, officiis veniam nostrum cum cumque impedit.
            </p>
            <p>
              Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
              praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
              provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
            </p>
          </Block>
        </Tab>
      </Tabs>
        </Page>
      );
    };

    Tabbar Scrollable

    import React, { useState } from 'react';
    import { Page, Navbar, Toolbar, Link, Block, NavRight, Tabs, Tab } from 'framework7-react';
    
    export default () => {
      const [isBottom, setIsBottom] = useState(true);
      const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      return (
        <Page pageContent={false}>
      <Navbar title="Tabbar Scrollable" backLink="Back">
        <NavRight>
          <Link
            iconIos="f7:arrow_up_arrow_down_circle_fill"
            iconAurora="f7:arrow_up_arrow_down_circle_fill"
            iconMd="material:compare_arrows"
            onClick={() => setIsBottom(!isBottom)}
          ></Link>
        </NavRight>
      </Navbar>
    
      <Toolbar tabbar scrollable position={isBottom ? 'bottom' : 'top'}>
        {tabs.map((tab, index) => (
          <Link key={tab} tabLink={`#tab-${tab}`} tabLinkActive={index === 0}>
            Tab {tab}
          </Link>
        ))}
      </Toolbar>
    
      <Tabs>
        {tabs.map((tab, index) => (
          <Tab key={tab} id={`tab-${tab}`} className="page-content" tabActive={index === 0}>
            <Block>
              <p>
                <b>Tab {tab} content</b>
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
                facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione
                illo suscipit temporibus sequi iure ad laboriosam accusamus?
              </p>
              <p>
                Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
                blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus
                sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur
                deleniti.
              </p>
              <p>
                Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio
                itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed
                eveniet unde delectus a maiores nihil dolores? Natus, perferendis.
              </p>
              <p>
                Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur
                perspiciatis quae provident consequatur minima doloremque blanditiis nihil maxime
                ducimus earum autem. Magni animi blanditiis similique iusto, repellat sed quisquam!
              </p>
              <p>
                Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam,
                natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam
                mollitia explicabo, unde aliquid impedit! Adipisci!
              </p>
              <p>
                Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste
                fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro
                accusantium, officiis veniam nostrum cum cumque impedit.
              </p>
              <p>
                Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad
                praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque
                provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.
              </p>
            </Block>
          </Tab>
        ))}
      </Tabs>
        </Page>
      );
    };

    Hide Toolbar On Scroll

    import React from 'react';
    import { Page, Navbar, Toolbar, Link, Block } from 'framework7-react';
    
    export default () => {
      return (
        <Page hideToolbarOnScroll>
      <Navbar title="Hide Toolbar On Scroll" backLink="Back"></Navbar>
    
      <Toolbar bottom>
        <Link>Left Link</Link>
        <Link>Right Link</Link>
      </Toolbar>
    
      <Block strong>
        <p>Toolbar will be hidden if you scroll bottom</p>
      </Block>
      <Block>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae
          facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo
          suscipit temporibus sequi iure ad laboriosam accusamus?
        </p>
        <p>
          Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit
          blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed,
          sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.
        </p>
        <p>
          Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est
          animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde
          delectus a maiores nihil dolores? Natus, perferendis.
        </p>
        <p>
          Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis
          quae provident consequatur minima doloremque blanditiis nihil maxime ducimus earum autem.
          Magni animi blanditiis similique iusto, repellat sed quisquam!
        </p>
        <p>
          Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus
          ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia
          explicabo, unde aliquid impedit! Adipisci!
        </p>
        <p>
          Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat
          iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium,
          officiis veniam nostrum cum cumque impedit.
        </p>
        <p>
          Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium
          rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi
          quaerat ea soluta doloremque. Iure fugit, minima facere.
        </p>
      </Block>
        </Page>
      );
    };