University of Derby

Pattern Hero Search In Page: Colour Variant 5 

<main class="center-align">
    <section class="pattern-hero pattern-hero-black pattern-hero-scheme-white content-scheme-black pattern-hero-with-content pattern-hero-search-in-page">
        <div class="pattern-hero-navigation">
        </div>
        <div class="pattern-hero-content">
            <div class="pattern-hero-background-container" role="banner">
                <div class="pattern-hero-background-container-pattern pattern-hero-background-container-pattern-diagonal pattern-hero-background-container-pattern-green-blue"></div>
            </div>
            <div class="pattern-hero-contents" id="content-start">
                <div class="pattern-hero-text-column">
                    <div class="pattern-hero-heading-wrapper">
                        <h2 class="hero-style">Explore our short courses</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="pattern-hero-search-content">
            <div class="pattern-hero-search-content-container">
                <form method="GET" action="">
                    <div class="search-input-group search-input-group-small">
                        <label for="" class="search-input-label">Search courses</label>
                        <input type="text" class="search-input" name="query" placeholder="">
                        <button class="search-button" type="button">
        <i class="uod-icons uod-icons-search"></i>
        <span class="search-button-overlay"><i class="uod-icons uod-icons-search"></i>search</span>
    </button>
                    </div>
                </form>
            </div>
        </div>
        <script type="application/ld+json">
            {
                "@context": "http://schema.org",
                "@type": "WebPage",
                "name": "Explore our short courses",
                "publisher": {
                    "@type": "CollegeOrUniversity",
                    "name": "University of Derby"
                }
            }
        </script>
    </section>
</main>
 
<main class="center-align">
	{% embed '@pattern-hero' with { heading: 'Explore our short courses', fullHeight: false, featuredContent: false, contentTypeTag: false, showHeader: false, callToAction: false, additionalClasses: 'pattern-hero-search-in-page'} %}
	    {% block content %}
	    <div class="pattern-hero-search-content">
	        <div class="pattern-hero-search-content-container">
	            <form method="GET" action="">
	                {% embed '@search-input' with { highContrast: highContrast, small: true, value: value, label: 'Search courses', placeholder: 'Search courses' } %}{% endembed %}
	            </form>
	        </div>
	    </div>
	    {% endblock %}
	{% endembed %}
</main>
 
{
  "callToAction": {
    "href": "#",
    "label": "Book your Open Day"
  },
  "menu": [
    "Course Search",
    {
      "title": "Study",
      "principleMenuItems": [
        {
          "title": "Undergraduate",
          "description": "Find everything you need on undergraduating studying",
          "href": "#"
        },
        {
          "title": "Postgraduate",
          "description": "Find everything you need on undergraduating studying Nick to write more text",
          "href": "#"
        },
        {
          "title": "Online",
          "description": "Find everything you need on undergraduating studying",
          "href": "#"
        },
        {
          "title": "Short courses",
          "description": "Find everything you need on undergraduating studying",
          "href": "#"
        }
      ],
      "secondaryMenuItems": [
        {
          "label": "Facilities",
          "href": "#"
        },
        {
          "label": "Fees and Finance",
          "href": "#"
        },
        {
          "label": "Student support",
          "href": "#"
        },
        {
          "label": "International",
          "href": "#"
        }
      ],
      "actions": [
        {
          "title": "Book your Open Day",
          "description": "Come and have a look around at one of our open days, wherre you can chat to the lecturers and view facilties.",
          "callToAction": {
            "label": "Book your Open Day",
            "href": "#"
          }
        }
      ]
    },
    {
      "title": "Life",
      "principleMenuItems": [
        {
          "title": "Our campuses",
          "description": "Find everything you need on undergraduating studying",
          "href": "#"
        },
        {
          "title": "Our city",
          "description": "Find everything you need on undergraduating studying Nick to write more text",
          "href": "#"
        },
        {
          "title": "Accomodation",
          "description": "Find everything you need on undergraduating studying",
          "href": "#"
        },
        {
          "title": "Clubs and societies",
          "description": "Find everything you need on undergraduating studying",
          "href": "#"
        }
      ],
      "secondaryMenuItems": [
        {
          "label": "Facilities",
          "href": "#"
        },
        {
          "label": "Fees and Finance",
          "href": "#"
        },
        {
          "label": "Student support",
          "href": "#"
        },
        {
          "label": "International",
          "href": "#"
        }
      ],
      "actions": [
        {
          "title": "Book your Open Day",
          "description": "Come and have a look around at one of our open days, wherre you can chat to the lecturers and view facilties.",
          "callToAction": {
            "label": "Book your Open Day",
            "href": "#"
          }
        }
      ]
    },
    {
      "title": "Research",
      "principleMenuItems": [
        {
          "title": "Academic research",
          "description": "Find everything you need on undergraduating studying",
          "href": "#"
        },
        {
          "title": "Research degrees",
          "description": "Find everything you need on undergraduating studying Nick to write more text",
          "href": "#"
        }
      ],
      "secondaryMenuItems": [],
      "caseStudies": [
        {
          "title": "Satisfaction, happiness and our connection to nature",
          "description": "See our latest studies into how a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering their anxiety levels",
          "href": "#"
        }
      ],
      "actions": [
        {
          "title": "Book your Open Day",
          "description": "Come and have a look around at one of our open days, wherre you can chat to the lecturers and view facilties.",
          "callToAction": {
            "label": "Book your Open Day",
            "href": "#"
          }
        }
      ]
    },
    {
      "title": "Business Services",
      "principleMenuItems": [
        {
          "title": "Developing People",
          "description": "We can help you fill your skills shortages by developing and empowering your workforce with our flexible work-based learning solutions.",
          "href": "#"
        },
        {
          "title": "Funding, Services and Support",
          "description": "You can develop your business using our expertise and resources, grants and loans, or free support.",
          "href": "#"
        },
        {
          "title": "Facilities and Services",
          "description": "We have venues for conferences, meetings and events, plus first-class technological centres and research and development facilities.",
          "href": "#"
        },
        {
          "title": "Recruiting the Best Talent",
          "description": "We want to connect your organisation to our talent. Our students and graduates can provide you with new ideas and energy.",
          "href": "#"
        },
        {
          "title": "Research and Expertise",
          "description": "We are experts in applied research with a practical, business focus and can help you with project development.",
          "href": "#"
        },
        {
          "title": "Partnership Opportunities",
          "description": "Join our growing network of high-quality corporate and academic partners.",
          "href": "#"
        }
      ],
      "secondaryMenuItems": [],
      "actions": [
        {
          "title": "Business enquiries",
          "description": "Get in touch with the relevant team to find out how we can make a big difference to your business.",
          "callToAction": {
            "label": "Make an enquiry",
            "href": "#"
          }
        }
      ]
    }
  ],
  "searchresults": [
    {
      "category": {
        "title": "Courses"
      },
      "results": [
        {
          "title": "Art and Design Mphil or PhD",
          "href": "#"
        },
        {
          "title": "Art Therapy MA",
          "href": "#"
        },
        {
          "title": "An introduction to Art Therapy Supervision",
          "href": "#"
        },
        {
          "title": "Creative Art and Design Practice (FdA)",
          "href": "#"
        },
        {
          "title": "Arts Therapies Theory and Research in Relation to Practice One",
          "href": "#"
        }
      ]
    }
  ],
  "heading": "Course Search",
  "featuredContent": "<p>Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.</p><p>Now DEFRA (Department for the Environment, Food and Rural Affairs) has made re-connecting people with nature a key theme in its new 25-year plan; a document that our researchers contributed to.</p>",
  "contentTypeTag": "Research",
  "lightFontWeight": null,
  "fullHeight": true,
  "highContrast": null,
  "frontColour": "green-blue",
  "backColour": "black",
  "scheme": "white",
  "contentScheme": "black"
}

Pattern Hero (with Search bar and in page)

Pattern hero element used in page doesn’t include a header, menu, breadcrumb navigation, call to action button or page tag.

The component includes a pattern and heading and search bar and must always have a front and back colour set - the default white/default isn’t compatible with this component.

NB

  • when using you should ensure that the pattern chosen is compatible with the Hero CTA in use on the page
  • if the frontColour is set to white then the highConstrast flag must be applied when pulling in the search input

Properties

  • contentTypeTag [required, string, false]
  • heading [required, string|html]
  • featuredContent [required, false]
  • callToAction [required, boolean, false]
  • fullHeight [required, boolean, false]
  • showHeader [required, boolean, false]
  • additionalClasses [required, string ‘pattern-hero-search-in-page’]
  • pattern [Required, string “zigzag”, “diagonal” or “weave”]
  • frontColour [Required, string “primary-blue”, “dark-grey”, “mid-grey”, “black”, “white”, “strawberry”, “mid-blue”, “light-grey”, “orange”, “turquoise”, “green”, “yellow”, “green-blue” or “text-black”]
  • backColour [Required, string “primary-blue”, “dark-grey”, “mid-grey”, “black”, “white”, “strawberry”, “mid-blue”, “light-grey”, “orange”, “turquoise”, “green”, “yellow”, “green-blue” or “text-black”]
  • breadcrumbs [required, false]