Download the PHP package northeastern-web/blade-components without Composer

kernl(ui) Blade

Package of Blade components for Northeastern University websites

Prequisites

In order to use this package

• Your project must be using the @northeastern-web/kernl-ui JavaScript and CSS package.
• Your project also must support the new Laravel Blade 7 components.

Installation

You can install the package via composer:

Note: In order to load the scripts needed for the kernl-ui blade package, you will need to include the scripts just before the closing </body> tag in your main template. Example

Blade Template

WordPress Example (via index.php)

Note: You may need to add the following to your composer.json file before installing the package.

If your project is using PurgeCss, merge the default PurgeCss content from the @northeaster-web/kernl-ui package in your tailwind.config.js:

Usage

Laravel app

To use the components in a Laravel app, the Service Provider should be loaded automatically, requiring no extra configuration.

Tighten Jigsaw

To use the components in a tightenco/jigsaw, load the Northeastern\Blade\JigsawServiceProvider class in the Jigsaw beforeBuild event:

Components

Local Header

To use the local header component, add the following markup to your Blade template.

Props

General Site Info

• current-path (optional) - Used to display the active state on each link. Pass the relative path of the current page (/about/staff).

• siteName - Provide the name of your site. Example: College of Science. This value will be used to populate various alt and name tags for accessibility purposes.

• siteHome - Provide the home url of your site. Example: https://www.northeastern.edu/graduate. If no siteHome is provided, the default is '/'.

• logoDark - An SVG of your site logo to be used on the default, light theme. Default is ITS Web Solutions Logo.

• logoLight - An SVG of your site logo to be used if dark theme is being utilized. Default is ITS Web Solutions Logo.

Menu Items

• links (optional) - Array of links for the navigation sections of the header. Each link can have a children key that's an array of more links. These links will be displayed in a dropdown under the parent link. Example:

• supportNav - Optional array of links for the support navigation section of the header. This array should be formatted exactly as they are in the links prop.

Menu Options

• dark (optional) - Set the color scheme to dark. Default is false. If using dark mode, you will need to provide a light logo to the logoLight prop, or use a light logo in the logo x-slot.

• menuStyle - Pass one of two values into this: 'standard', or 'mega'. Default is 'standard.'

Search Options

• action (optional) - The url the search form should submit a GET request to. The input value will be submitted as a form parameter. Note, if no action is supplied, search will not display on your site, even if you don't set the search prop to false.
• search - Add a search option to your local header. Default is true. Set to false to remove search functionality from your local header.
• searchName - This sets the name value of your search form input. Default is "search", but depending upon your site could be different. For instance, on WordPress sites that use the Relevanssi plugin, the searchName should be set to 's'.

Mega Menu Options

• megaMenuCta - If you select 'mega' as your menuStyle, you can add a CTA to the footer of each menu item. It should be formatted as such:

• megaMenuAlert - This is an optional string that will place a badge next to the title of your CTA.

• megaMenuCopy - This is an optional string that will allow you to write some copy about your CTA for context.

Accordions

To use the accordion component, add the following markup to your Blade template.

Alternatively, you can use the x-kernl-accordion.with-left-icon component for a slightly different design.

x-kernl-accordion.base Props

• label = The aria-label for the accordion ul element
• default-section (optional) = The id of the accordion item that should be open by default

x-kernl-accordion.item/x-kernl-accordion.with-left-icon Props

• title - The title that should be shown on the accordion button
• id (optional) - The ID that should be assigned to the accordion. This should match the default-section prop passed to the base accordion component for the accordion item that should be open by default.

Alerts

To use the alert components, add the following markup to your Blade template.

Alternatively, you can use the x-kernl-alert.full-width component for a slightly different design.

x-kernl-alert.container and x-kernl-alert.full-width Props

• label - Used for the aria-label and "remember" functionality. Should be unique across your site if using the "remember" functionality.
• closeable (optional) - If true, show the close button. If false, do not show the close button. Default is true.
• remember (optional) - If true, the component will use localStorage to remember when the user has closed the alert and will not show it again.

Any additional classes or attributes you put on the component will be passed through.

Banners

With Offset Card

To use the With Offset Card Banner component, add the following markup to your Blade template.

x-kernl-banners.with-offset-card Props

• background-url - URL of background image to be applied.

Bottom Title

To use the Bottom Title Banner component, add the following markup to your Blade template.

x-kernl-banners.bottom-title Props

• background-url - URL of background image to be applied.
• title - Title to be presented.

Buttons

To use the Solid Button and Outline Button components, add the following markup to your Blade template.

By default, the button components will render a button element. If you need an anchor element instead, just include the href prop.

Any additional classes or attributes you put on the component will be passed through.

x-kernl-button.solid and x-kernl-button.outline Props

• color - The color the button should be. Options: dark, light, medium-gray, light-gray, red, blue, and green.
• size - (optional) Determines if the button should be smaller or larger than the default size. Options: small and large.
• href - (optional) Determines if the button should be rendered as an anchor tag and where the anchor should link to.

Carousels

Base and Base Slide

To use the Carousel Base and Base Slide component, add the following markup to your Blade template.

x-kernl-carousel.base Props

• delay - (optional) The delay that the slides should rotate at in milliseconds. Default value is 5000.

x-kernl-carousel.base.slide Props

• index - The index of the slide. Each slide's index should increment by 1, starting at 0.
• background-classes - (optional) Any classes you want to apply to the outer element.
• slot-classes - (optional) Any classes you want to apply to the element around the slot.

Any additional attributes you add to the Base Slide component (style, etc.), will be passed through to the background element.

Split and Split Slide

To use the Split Carousel and Split Slide component, add the following markup to your Blade template.

x-kernl-carousel.split Props

• height-classes - Classes to set the overall height on the carousel. Should be double each slide height when slides are stacked (mobile).
• delay - (optional) The delay that the slides should rotate at in milliseconds. Default value is 5000.

x-kernl-carousel.split.slide Props

• index - The index of the slide. Each slide's index should increase by 1, starting at 0.
• class - Any classes you want to apply to the element around the slot. This should be used to pass in the height classes.

Any additional attributes you add to the Split Slide component (style, etc.), will be passed through to the background element.

Loaders

To use the Loader component, light or dark, add the following markup to your Blade template.

Light

x-kernl-loaders.light Props

• x-show - (optional) Used to show/hide the loader based on an Alpine.js property

Dark

x-kernl-loaders.dark Props

• x-show - (optional) Used to show/hide the loader based on an Alpine.js property

Tags

Solid

To use the Solid Tag component, add the following markup to your Blade template.

x-kernl-tags.solid Props

• color - Color for text/background. Default is dark
• pill - (optional) Rounds corners for a pill-like appearance. Default is false
• uppercase - (optional) Uppercase content. Default is false

Outline

To use the Outline Tag component, add the following markup to your Blade template.

x-kernl-tags.outline Props

• color - Color for text/border. Default is dark
• pill - (optional) Rounds corners for a pill-like appearance. Default is false
• uppercase - (optional) Uppercase content. Default is false

Modals

Base Modal

To use the Base Modal component, add the following markup to your Blade template. The modal can be triggered from anywhere on your page using the NUModals.open and NUModals.close methods.

x-kernl-modals.base Props

• id - ID of the modal. Must be unique throughout the app. This ID can be used with window.NUModals methods
• closeable - (optional) Adds close button at the top right corner. true by default
• close-on-click-outside - (optional) Adds behavior to close when clicking outside the modal. true by default
• close-on-escape-key - (optional) Adds behavior to close when pressing the Esc key. true by default

Footer

Local

To use the Local Footer component, add the following markup to your Blade template.

Props

• links = Array of titles and links for the navigation sections of the footer. Each title can have a children key that's an array of more titles/links. These titles/links will be displayed below the parent title. Example:

• logo-url - (optional) URL for the footer logo.
• facebook-url - (optional) Facebook URL for the footer. Adding the URL will display the respective social network icon.
• youtube-url - (optional) Youtube URL for the footer. Adding the URL will display the respective social network icon.
• linkedin-url - (optional) Linkedin URL for the footer. Adding the URL will display the respective social network icon.
• snapchat-url - (optional) Snapchat URL for the footer. Adding the URL will display the respective social network icon.
• twitter-url - (optional) Twitter URL for the footer. Adding the URL will display the respective social network icon.
• instagram-url - (optional) Instagram URL for the footer. Adding the URL will display the respective social network icon.

PreFooter

To use the PreFooter component, use the following markup to your Blade Template. Note, for a multi-column layout the element will need to be wrapped in a foreach loop, or manually populated.

x-kernl-footers.base Props

• columns - (optional) Set the number of grid columns to display on large screens. Default is 3.

x-kernl-footers.base Props

• featherIcon - (optional) Choose a Feather Icon from https://feathericons.com/ and enter the name of it here.
• title - (required) The title of the PreFooter column.
• description - (required) A description of the PreFooter column.
• link - (required) This will be an array that must include a url, and optionally a target. Example:

Tabs

Underlined

x-kernl-tabs.underlined Props

• default-active - (optional) Index of the initial active tab. Default is 0 (zero).

x-kernl-tabs.underlined.item Props

• title - Title of the tab contents

Any additional classes or attributes you put on the item component will be passed through.

Bordered

x-kernl-tabs.bordered Props

• default-active - (optional) Index of the initial active tab. Default is 0 (zero).

x-kernl-tabs.bordered.item Props

• title - Title of the tab contents

Any additional classes or attributes you put on the item component will be passed through.

Detached

x-kernl-tabs.detached Props

• default-active - (optional) Index of the initial active tab. Default is 0 (zero).

x-kernl-tabs.detached.item Props

• title - Title of the tab contents

Any additional classes or attributes you put on the item component will be passed through.

Heroes

Split Layout Media Content

x-kernl-heroes.split-layout-content-media Props

• media-url - Url of image to show
• title - Title of content
• body - Body of content
• call-to-action - Call To Action button label
• call-to-action-url - Url of call to action button

Any additional classes or attributes you put on the component will be passed through.

Note: when using the \$slot version, title, body, call-to-action and call-to-action-url are not required.

Full Background Media Centered Content

x-kernl-heroes.full-centered-content Props

• title - Title of content
• subtitle - Subtitle of content
• body - Body of content

Any additional classes or attributes you put on the component will be passed through.

Note: when using the \$slot version, title, body, call-to-action and call-to-action-url are not required.

Interior Navigation

x-kernl-interior-navigation.base Props

• title - Title for navigation
• title-url - (optional) URL for navigation
• links - Array of navigation items. Supports child navigation via children key. Navigation items can have the following attributes:
  • text - Text for the navigation item
  • href - URL for the navigation item
  • active - Sets the navigation item as active. Default is false
  • children - Child navigation for navigation items
  • expandable - Sets whether the child navigation can be expanded/collapsed. Applies when children is used. Default is false
  • expanded - Sets whether the child navigation is expanded or not by default. Applies when expandable is used. Default is false

Any additional classes or attributes you put on the base component will be passed through the root div component.

Cards

Simple Link

x-kernl-cards.simple-link Props

• title - Title text
• body - Body text
• color - (optional) Background color of the card. Defaults to 'light'
• size - (optional) Text size. Defaults to 'default'
• :with-footer - (optional) Shows/hides footer. Default is false
• footer-text - Footer text
• url - URL to navigate on card click

Any additional classes or attributes you put on the component will be passed through.

Note: \$slot version has two named slots: 'main' and 'footer'. Use them to override the main and footer content respectively.

Simple With Actions

x-kernl-cards.simple-with-actions Props

• title - Title text
• body - Body text
• color - (optional) Background color of the card. Defaults to 'light'
• size - (optional) Text size. Defaults to 'default'
• primary-action-text - Text displayed for Primary Action
• primary-action-url - URL to navigate to when when the Primary Action is clicked
• secondary-action-text - (optional) Text displayed for Secondary Action
• secondary-action-url - (optional) URL to navigate to when the Secondary Action is clicked

Any additional classes or attributes you put on the component will be passed through.

Note: \$slot version has two named slots: 'main' and 'actions'. Use them to override the main and actions content respectively.

Link With Media

x-kernl-cards.link-with-media Props

• title - Title text
• body - Body text
• color - (optional) Background color of the card. Defaults to 'light'
• aspect-ratio - (optional) Aspect ratio of image. Defaults to '16:9'
• image-url - URL to image
• url - URL to navigate to on click
• orientation - (optional) Orientation of image. Defaults to 'vertical'
• badge - (optional) Badge text
• pre-header - (optional) Pre header text
• :with-footer - (optional) Shows/hides footer. Defaults to false
• footer-text - (optional) Footer text

Any additional classes or attributes you put on the component will be passed through.

Note: \$slot version has two named slots: 'main' and 'footer'. Use them to override the main and footer content respectively.

Note: The @tailwindcss/aspect-ratio plugin is required for the this component to work correctly. Please see documentation

Link With Media And Actions

x-kernl-cards.link-with-media-and-actions Props

• title - Title text
• body - Body text
• color - (optional) Background color of the card. Defaults to 'light'
• aspect-ratio - (optional) Aspect ratio of image. Defaults to '16:9'
• image-url - URL to image
• url - URL to navigate to on click
• orientation - (optional) Orientation of image. Defaults to 'vertical'
• badge - (optional) Badge text
• pre-header - (optional) Pre header text
• primary-action-text - Text displayed for Primary Action
• primary-action-url - URL to navigate to when when the Primary Action is clicked
• secondary-action-text - (optional) Text displayed for Secondary Action
• secondary-action-url - (optional) URL to navigate to when the Secondary Action is clicked

Any additional classes or attributes you put on the component will be passed through.

Note: \$slot version has two named slots: 'main' and 'actions'. Use them to override the main and actions content respectively.

Note: The @tailwindcss/aspect-ratio plugin is required for the this component to work correctly. Please see documentation

Event

x-kernl-cards.event Props

• title - Title text
• body - Body text
• date - Date to display
• time - Time to display
• color - (optional) Background color of the card. Defaults to 'light'
• url - URL to navigate to on click'
• image-url - URL to image'
• :with-footer - (optional) Shows/hides footer. Defaults to false
• footer-text - (optional) Footer text

Any additional classes or attributes you put on the component will be passed through.

Note: \$slot version has two named slots: 'main' and 'footer'. Use them to override the main and footer content respectively.

Note: The @tailwindcss/aspect-ratio plugin is required for the this component to work correctly. Please see documentation

Select

x-kernl-selects.select Props

• name - Name of the input.
• :options - Array of options to select. Must include at least value and label keys.
• :multiple - (optional) Allow multiple options to be selected. Defaults to false.
• placeholder - (optional) Text to be presented when no selection has been made.
• :listens - (optional) Allows to filter options automatically when some other select input changes. Keyed array must have keys for input-changed event and filter with the desired attribute to filter options. Eg: when category-changed is received, :options will be filtered with the value present in category for each option.
• x-on:{input-name}-changed - (optional) Listen for a change on the dropdown.

Any additional classes or attributes you put on the component will be passed through.

Note: The @tailwindcss/forms plugin is required for the this component to work correctly. Please see documentation

Paginators

x-kernl-paginators.base Props

• :number-of-pages - Number of available pages for pagination.
• :current-page - Initial selected page.
• mode - (optional) php or js. Defaults to php.
• pagination-url - (php mode only) Base URL used for pagination links.
• query-param-name - (optional - php mode only) Name of the page query parameter. Defaults to page.
• :appends - (optional - php mode only) Keyed array of extra query parameters to attach to the pagination URL.
• emits - (optional - js mode only) Name of event dispatched when switching pages.

When listening for the page-changed event in js mode, you may access the new page via $event.detail.page.