Home » Kitchen Sink

Kitchen Sink

This page is used to show and display all of the theme's components. It provides a high-level view of the exisiting markup and elements that developers and designers can reference.

Buttons

Buttons with props passed by fields
Standard Buttons
Button Button Button Button Button Button Button Link Button Link Button Link
Button Button Button
Button
Button Button Link Button Link Button Link Button Link Disabled Button Link
Button Button Button Button Button Disabled Button Button
Button Button Button
Button
Button
Button Button Button Button Button
Button Button Button
Button
Button

How to use it

    <x-button link="http://google.com/" title="Read More" btn-type="outlined" color="secondary" />

    <x-button link="http://google.com/" title="Learn More" icon-position="right" icon="chevron-right" color="dark" />

    <x-button link="http://google.com/" title="Favorite" btn-type="outlined" color="secondary" icon="heart" icon-type="solid" />

    <x-button link="http://google.com/" title="View Event" color="transparent" icon="chevron-right" icon-wrapper-class="bg-white p-1 rounded-full" />
Prop Type Rules Description
title string required The label / text for the button
link string required The URL for the button
style string default: button | (options: button, link) Display the button as a button or link
btn-type string solid or outlined | default: solid Display the button as solid or outlined
color string default: primary Determines the color of the button
size string default: small | (options: small, medium, large) Determines the size of the button
icon string optional Adds an icon to the button (refer to blade heroicons)
icon-type string optional Displays the icon as solid or outlined
icon-position string default: left | (options: left, right, top, bottom) Determines the icon position relative to the label
icon-class string optional Add CSS classes to the icon
icon-wrapper-class string optional Add CSS classes to the icon wrapper (background, padding, radius)

Contact Item

1 Mt Vernon St 3rd Floor, Winchester, MA 01890
Prop Type Rules Description
label string required The label / text for the contact item
label-class string required Optional CSS classes for the label/text
icon string optional Adds an icon to the button (refer to blade heroicons)
icon-type string solid (s) or outline (o) | default: s Display solid or outlined icons
icon-class string optional Optional CSS classes for the icon
url string optional The URL for the item if it should link

How to use it

  <x-contact-item label="(123) 456-7890" url="tel:(123) 456-7890" icon="phone" />

Event

The event component displays an event with a date/time line, title, and audience categories. It supports a dark prop for a dark background with white text.

Dark Mode
Light Mode

How to use it

<!-- Dark mode -->
<x-event
    dark
    title="Event Title"
    day-of-week="Saturday"
    month="July"
    day="4"
    start-time="9:00 A.M."
    categories="All Ages"
    link="#Event"
    class="p-5"
/>

<!-- Light mode -->
<x-event
    title="Event Title"
    day-of-week="Saturday"
    month="July"
    day="4"
    start-time="9:00 A.M."
    categories="All Ages"
    link="#Event"
    class="p-5 border rounded"
/>

Featured Event Card

The featured-event-card component displays a featured event with supporting event details, imagery, description, audience information, and a call-to-action link. It is intended for highlighting individual events in prominent areas of the site.

Musical Adventures with Grand Teton Music Festival!

Featured Events

Musical Adventures with Grand Teton Music Festival!

Thursday, July 30 · 11:00 AM

All Ages

Musical Adventures brings young children and their caregivers together to sing, dance, explore instruments, and enjoy music through interactive play.

View Event

How to use it

<x-featured-event-card
    subtitle="Featured Events"
    title="Musical Adventures with Grand Teton Music Festival!"
    date="Thursday, July 30 · 11:00 AM"
    audience="All Ages"
    image="/path/to/image.jpg"
    description="Musical Adventures brings young children and their caregivers together to sing, dance, explore instruments, and enjoy music through interactive play."
    link="/events/musical-adventures"
/>

Forms

Select
Radio Input

Toggleable Search

Inline
Search in collapse overlay

Swiper

The swiper component is used to make carousel slider elements. A slider element for rotating through multiple items using the swiper js sliders.

Rules

You can put anything in the slot of this component but the children must EACH be wrapped in a <div> for it to work properly.
Prop Type Rules Description
sliderID string required | default: 0 Unique identifer of the swiper slider
slidesPerView string default: 1 Number of items to slide
pagination boolean default: true Display the paginations dots (or not)
iconType string solid (s) or outline (o) | default: s Display solid or outlined icons
prevIconName string hero icon name | default: arrow-left-circle Select the icon for previous
nextIconName string hero icon name | default: arrow-right-circle Select the icon for previous
swiper
Skip slider
🎉
🎊
🥳
🎁
🎈

How to use it

      <x-swiper>
        
        <--For each slide-->
        <div>
          Slide Content
        </div>
        <--/End each slide-->

      </x-swiper>

Featured Service Card

The featured-service-card component displays a featured service with supporting content, an image, and a link. Use it wherever a service needs to be presented as a prominent card.

Storytime

Featured Service

Storytime

Stories, songs, rhymes, and movement come together in this joyful weekly program designed for young children and their caregivers.

Learn about Storytime