888.233.9085Apply Now

Building blocks of a QuickBridge Gatsby Page

Table of contents

  1. Hygraph
  2. Layout / Header & Footer
  3. Templates
  4. Static Pages
  5. Forms
  6. Components
  7. FAQ

Hygraph

Our content is stored in Hygraph.

Layout / Header & Footer ← This section was copy & pasted from National Funding so it is not accurate

Initially when going through the pages, I noticed there are very specific layouts for some Page Types. Those will be pre-defined. Upon further investigation, I realized that there are many mix and match style layouts that require a more nuanced approach that I hope to incorporate as time goes on and retroactively fit certain other page types.

Prefined Layouts

Used in these page models:

  • TBD

You select a Landing Type (will change) or a layout and that will preselect the header (different from a hero type) and footer for the page.

Note: The links will be replaced by assets when solidified.

Header

Homepage Header Screenshot

Footer

Homepage Footer Screenshot

  • 'NoFooterForm' - layouts/no-footer-form.js

Found at: http://localhost:8000/about-us/our-culture/

Header

Homepage Header Screenshot

Footer

Homepage Footer Screenshot

Mix and Match Layouts

Starting relatively late in the process, I noticed that the /application pages have complete variance in their headers and footers. That adds complexity to their page creation. For them I have switched the Hygraph property structure to include both a Header Type and Footer Type

Header Types

  • 'All' - Header/index.js

HeaderAll Screenshot

  • 'Bars2' - Header/Bars2.js

HeaderBars2 Screenshot

  • 'DLP' - Header/DLP.js

HeaderDLP Screenshot

  • 'LandingPartner' - Header/LandingPartner.js

HeaderLandingPartner Screenshot

  • 'LogoOnly' - Header/LogoOnly.js

HeaderLogoOnly Screenshot

  • 'MessagePhone' - Header/MessagePhone.js

HeaderMessagePhone Screenshot

  • 'Partner' - Header/Partner.js

HeaderPartner Screenshot

  • 'All' - Footer/index.js

FooterAll Screenshot

  • 'LandingStandard' - Footer/LandingStandard.js

FooterLandingStandard Screenshot

  • 'Legacy' - Footer/Legacy.js

FooterLegacy Screenshot

  • 'NoPhone' - Footer/NoPhone.js

FooterNoPhone Screenshot

  • 'NoPhone2' - Footer/NoPhone2.js

FooterNoPhone2 Screenshot

  • 'TrustOnly' - Footer/TrustOnly.js

FooterTrustOnly Screenshot

Templates

Announcement

Blog Preview

Industry

Infographic

PPC

Root

Small Business

Unique

Static Pages

These pages will require a develop update and push to change. For the legalese, this is because they can possibly appear on every page.

Because QuickBridge was the first iteration of developing a Gatsby site, the author (Romo) was unsure of how to create EVERY page in Hygraph so here is the list of pages that need to be changed in the code vs Hygraph.

Forms

TODO

Components

This section will document all the unique components in the QuickBridge site along with a visual reference. It will also document where the components can be used. Important Note: Markdown tries to scale up the image as much as possible so when viewing on desktop, the images of the components is larger than when viewed on the site itself

AdvantageBox

Properties

AdvantageBox.propTypes = {
  className: PropTypes.string,
  child: PropTypes.bool,
  icon: PropTypes.object,
  title: PropTypes.string,
  description: PropTypes.string,
};

AdvantageBox.defaultProps = {
  className: "",
  child: true,
  icon: undefined,
  title: "QuickBridge Advantages",
  description:
    "Simple application process.  Flexible loan term options. Receive funds within days.",
};

Usage on Hygraph

NA

AnnouncementAside

Properties

AnnouncementAside.PropTypes = {
  children: PropTypes.node,
  img: PropTypes.string.isRequired,
  title: PropTypes.string,
  url: PropTypes.string.isRequired,
};

AnnouncementAside.defaultProps = {
  children: undefined,
  img: undefined,
  title: undefined,
  url: undefined,
};

Usage on Hygraph

BlogPost

Properties

Usage on Hygraph

<blog-post
  url="https://www.quickbridge.com/blog/what-is-the-right-business-financing-if-you-have-cash-flow-problems/"
  img="yUhXh5FREes8dNJGwaSQ"
  title="What is the Right Business Financing if You Have Cash Flow Problems?"
></blog-post>

Bulletpoint

Properties

Bulletpoint.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  supText: PropTypes.string,
  supUrl: PropTypes.string,
  open: PropTypes.func.isRequired,
};

Bulletpoint.defaultProps = {
  title: "",
  description: "",
  supText: null,
  supUrl: null,
};

Usage in React

<Bulletpoint
  title=" Flexible Funding Up to $500K"
  description="We design our small business loans to align with the pace of your business. This gives you the flexibility to take advantage of opportunities as they come up - whether those are seasonal needs, equipment upgrades or an unexpected job."
  supText="2"
  supUrl="/modal/disclosures/"
/>

ContentImage

Properties

ContentImage.propTypes = {
  url: PropTypes.string.isRequired,
  alt: PropTypes.string,
  align: PropTypes.oneOf(["left", "center", "right"]),
};

ContentImage.defaultProps = {
  url: undefined,
  alt: "",
  align: "center",
};

Usage on Hygraph

<content-image
  alt="A hand pulling on a leaf of a plant growing on an agriculture farm"
  url="bgTy6cSeS0uSpcLUBLXc"
></content-image>

CTABox

Properties

Usage on Hygraph

CTAButton

Properties

Usage on Hygraph

GlobalModal

Properties

Usage on Hygraph

GoogleMap

Properties

Usage on Hygraph

HeadingWithIcon

Properties

Usage on Hygraph

Icon

Properties

Usage on Hygraph

IconTextTri

Properties

Usage on Hygraph

IndustryBox

Properties

Usage on Hygraph

InfographicSquare

Properties

Usage on Hygraph

InfographicViewBox

Properties

Usage on Hygraph

LazyIframe

Properties

Usage on Hygraph

LoadableIndexBelowFold

Properties

Usage on Hygraph

ModalCard

Properties

Usage on Hygraph

ModalSup

Properties

Usage on Hygraph

PartnerProgram

Properties

Usage on Hygraph

QuoteBox

Properties

Usage on Hygraph

Properties

Usage on Hygraph

RowCarousel

Properties

Usage on Hygraph

RowCheckboxList

Properties

Usage on Hygraph

RowCompanyCulture

Properties

Usage on Hygraph

RowCompanyTimeline

Properties

Usage on Hygraph

RowComparison

Properties

Usage on Hygraph

RowCountUps

Properties

Usage on Hygraph

RowGivingBack

Properties

Usage on Hygraph

RowHowFundingHelps

Properties

Usage on Hygraph

RowJoinUs

Properties

Usage on Hygraph

RowPeopleAtQuickBridge

Properties

Usage on Hygraph

RowQuickBridgeAdvantages

Properties

Usage on Hygraph

RowRecognition

Properties

Usage on Hygraph

Properties

Usage on Hygraph

RowTitleWithHR

Properties

Usage on Hygraph

RowTypesOfLoans

Properties

Usage on Hygraph

RowValuesWeHold

Properties

Usage on Hygraph

RowWhyQuickBridge

Properties

Usage on Hygraph

RowWithQuickBridge

Properties

Usage on Hygraph

ScrollToTop

Properties

Usage on Hygraph

Social

Properties

Usage on Hygraph

TitleRedBlack

Properties

Usage on Hygraph

TrustedByThousands

Properties

Usage on Hygraph

Trustpilot

Properties

Usage on Hygraph

UseBox

Properties

Usage on Hygraph

WhiteBoxContent

Properties

Usage on Hygraph

Youtube

Properties

Usage on Hygraph

BackgroundWithContent

Properties

Usage on Hygraph

Properties

Usage on Hygraph

BlogPreview

Properties

Usage on Hygraph

CookieConsent

Properties

Usage on Hygraph

FAQ

Properties

Usage on Hygraph

GoogleReview

Properties

Usage on Hygraph

GoogleReviewNew

Properties

Usage on Hygraph

ModalCardNew

Properties

Usage on Hygraph

Quote

Properties

Usage on Hygraph

RedAccentImage

Properties

Usage on Hygraph

Properties

Usage on Hygraph

RowBlogPreview

Properties

Usage on Hygraph

Properties

Usage on Hygraph

RowCountUpsNew

Properties

Usage on Hygraph

RowGoogleReviews

Properties

Usage on Hygraph

RowOfficeGoogleMap

Properties

Usage on Hygraph

RowPersonOverLogoApply

RowPersonOverLogoApply RowPersonOverLogoApply

Properties

RowPersonOverLogoApply.propTypes = {
  handle: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  children: PropTypes.node,
  bullets: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
};

RowPersonOverLogoApply.defaultProps = {
  handle: undefined,
  title: "Your Path to Business Funding Starts Here",
  children: undefined,
  bullets: `[
        'Simple application process',
        'Receive funds within days',
        'Business loans of up to 500K',
        'No hidden fees'
    ]`,
  url: "/apply/",
};

Usage on Hygraph

<row-person-over-logo-apply
  handle="SxKJvUI1TQ22uDUeh84V"
  bullets='[
        "Simple application process",
        "Receive funds within days",
        "Business loans of up to 500K",
        "No hidden fees"
    ]'
>
  <p>
    Get fast financing for your business when you need it the most, not when the
    bank decides you're ready. Applying requires no commitment and takes just
    minutes to complete.
  </p>
</row-person-over-logo-apply>

RowTrustIcons

Properties

Usage on Hygraph

RowTwoColumns

Properties

Usage on Hygraph

RowWhyChooseQuickBridge

Properties

Usage on Hygraph

Seo

Properties

Usage on Hygraph

StyledButton

Properties

Usage on Hygraph

TextBlock

Properties

Usage on Hygraph

YesSteps

Properties

Usage on Hygraph

YesStepsNew

Properties

Usage on Hygraph

FAQ

This section will generally summarize the "how to" steps to create or modify type of pages / content on the site.

How to hide or display stuff at certain sizes

We will utilize the bootstrap utility classes for this, bootstrap - display, hiding elements, but here will be the most utilized classes.

This will hide on xs & sm, but show on medium and above: d-none d-md-block This will show on xs & sm, but hide on medium and above: d-block d-md-none