Components Page
This is a simple development page, intended to build out and contain the individualized components that will be used to build out the website.
To view basic styles, please refer to the styleguide page.
Buttons
Primary Button
Secondary Button
Media Buttons
Iconn Buttons
Arrow Buttons
Tooltips
Text to be described This is the simple content that appears within the tooltip
Videos
Few can name a marish pond that isn't a trappy block. Few can name an unroused camp that isn't a lobar barometer. Few can name a conjoined key that isn't a wheaten hourglass. The step-son of a honey becomes a possessed ton. This could be, or perhaps some posit the inby knight to be less than caller. We know that a plow is the rubber of a lan.
In ancient times the first feisty december is, in its own way, a pipe. This could be, or perhaps a lake of the arch is assumed to be a desmoid stamp. This could be, or perhaps a behavior is a beard's willow. A chard is a clerk from the right perspective. Extending this logic, a pest sees a humidity as an unreined lumber. The literature would have us believe that a hippest peace is not but a weasel.
If this was somewhat unclear, before step-mothers, maracas were only mices. The zeitgeist contends that the first dorty dinosaur is, in its own way, a hovercraft. An opinion is the single of a wax. In ancient times those clauses are nothing more than curtains. As far as we can estimate, a sea is a protocol's tv. A hoggish psychiatrist's comb comes with it the thought that the girly grandmother is a honey.
In recent years, few can name a curving feast that isn't a laurelled step-father. One cannot separate grouses from crackle herrings. What we don't know for sure is whether or not slaves are flory exchanges. Nowhere is it disputed that the first profane curler is, in its own way, a guarantee. A biology is a tuneful gender. The literature would have us believe that a maroon guarantee is not but a copper.
Authors often misinterpret the team as an unbent twine, when in actuality it feels more like an umber argentina. A custom reaction is a religion of the mind. Some parotid middles are thought of simply as quails. An alcohol is a chauffeur's spandex. Few can name a bordered price that isn't a sizy behavior. If this was somewhat unclear, a fiber of the estimate is assumed to be a fourteenth ophthalmologist.
A swamp of the flax is assumed to be a shredless slash. A dill is the manager of a support. They were lost without the unshed pea that composed their aftermath. A colt sees a ketchup as a satem pumpkin. A destined timer's ruth comes with it the thought that the spousal custard is a knowledge. Though we assume the latter, the cry is a node.
Images
Cards
Sample Card
Duis convallis vestibulum tellus, vitae lobortis quam bibendum quis. Maecenas lectus neque, tincidunt ut dignissim non, lacinia nec nisi.
Sample Card
Duis convallis vestibulum tellus, vitae lobortis quam bibendum quis. Maecenas lectus neque, tincidunt ut dignissim non, lacinia nec nisi. Maecenas lectus neque, tincidunt ut dignissim non, lacinia nec nisi.
Sample Card
Duis convallis vestibulum tellus, vitae lobortis quam bibendum quis. Maecenas lectus neque, tincidunt ut dignissim non, lacinia nec nisi.
Tabs
- Duis convallis vestibulum tellus, vitae lobortis quam bibendum quis. Maecenas lectus neque, tincidunt ut dignissim non, lacinia nec nisi.
- Duis convallis vestibulum tellus, vitae lobortis quam bibendum quis. Maecenas lectus neque, tincidunt ut dignissim non, lacinia nec nisi.
- Duis convallis vestibulum tellus, vitae lobortis quam bibendum quis. Maecenas lectus neque, tincidunt ut dignissim non, lacinia nec nisi.
Tabs
- Sed laoreet lacus eu metus consequat, in vehicula est volutpat
- Nullam laoreet libero tellus, ut dignissim leo luctus eu
- Nulla ac urna et lacus auctor ornare in eu nisi
- Pellentesque neque arcu, scelerisque id ligula at, hendrerit porta felis
- Aenean feugiat dapibus dolor, pulvinar vulputate orci vehicula sed
- Suspendisse non sem nisi
- In quis odio ex
- Donec porta sodales blandit
- Etiam auctor justo at turpis efficitur, quis lacinia tellus imperdiet
- Maecenas eget fringilla dui, ut posuere eros
- Proin cursus finibus congue
- Donec finibus sagittis massa, eget lacinia lectus euismod non
- Aliquam ligula lacus, varius at metus id, consectetur lacinia enim
- Duis id pulvinar odio, eu luctus leo
- Fusce eu velit aliquam enim mollis vehicula in et risus
- Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
- Maecenas tellus massa, maximus in fermentum ut, pulvinar non arcu
- Cras ultricies consectetur placerat
- Vivamus in posuere magna
- Etiam sit amet orci justo
- Maecenas rutrum, lacus tempus dignissim efficitur, tellus sapien bibendum metus, at dictum nisi tellus cursus erat
- Aenean elementum sollicitudin ultrices
- Vestibulum eu felis ac augue dignissim fermentum
- Curabitur lacinia quis risus vitae tincidunt
Tab
This is a sample tab component. It also supports the ability to hide/show the content based on a defined media query.
Lorem ipsum dolor sit amet, consectetur adipiscing elit desec dola mescalius. Duis convallis vestibulum tellus, vitae lobortis quam bibendum quis. Maecenas lectus neque, tincidunt ut dignissim non, lacinia nec nisi. Integer porta ante ut sapien rutrum aliquam interdum a felis. Nulla auctor vestibulum enim, et luctus risus interdum eu. Quisque id arcu ultricies turpis posuere varius vitae varius quam. Nam non rhoncus eros. Proin posuere fringilla placerat. Nullam fermentum odio quis neque dapibus ornare. Sed pellentesque eros vel nisl efficitur cursus. Proin dictum velit in aliquam aliquet.
Second Tab
Vivamus lobortis tellus est, condimentum congue sapien facilisis et. In finibus ornare metus, id convallis purus egestas vitae. Duis et aliquet turpis, et molestie sapien. Nullam ornare, quam nec lacinia tincidunt, mauris diam feugiat quam, ac iaculis lectus purus at odio. Fusce molestie facilisis arcu, et volutpat urna aliquet eget. Mauris mi risus, luctus a iaculis sit amet, laoreet vel est. Sed suscipit ultrices mauris, nec aliquam justo suscipit at. Ut est enim, maximus quis suscipit eu, efficitur et ligula. Praesent et feugiat diam. Nunc turpis nunc, tincidunt non metus quis, maximus mattis diam.
Mauris iaculis ac tellus eu fermentum. Fusce eget leo nec enim imperdiet hendrerit ut vitae ante. Sed ornare metus sit amet est viverra vestibulum. Praesent fringilla convallis est ut imperdiet. Ut vitae diam a enim finibus tristique. Cras sollicitudin bibendum felis, eget bibendum est vulputate nec. In sollicitudin tempus ultricies. Quisque ornare nunc eget commodo aliquet. Vivamus ac dapibus quam, eget egestas libero.
Accordions
Standard Accordions
Show Accordions (Reveal on Breakpoint)
Hide Accordions (Reveal on Breakpoint)
UI Line Icons
Social Media Icons
Dynamic Data Pattern
This is a simple test for using sample data, and is intended mostly as an example rather than an active component. Instead, it is meant to demonstrate a few different patterns for building interaction with the existing tools.
The button below is part of an inline apline component built specifically for this page. Clicking the button triggers one of the sample API endpoints in the ccapimodule
CraftCMS module, and demonstrates a simple example of using the fetch() function to make requests from our custom API endpoints.
The component’s HTML also demonstrates how to effectively transition in items using the x-for and x-intersect directives
(the later being a first-party plugin that we have activated via npm and our scripts.js file.)
Lorem ipsum dolor sit amet, consectetur adipiscing elit desec dola mescalius. Duis convallis vestibulum tellus, vitae lobortis quam bibendum quis. Maecenas lectus neque, tincidunt ut dignissim non, lacinia nec nisi. Integer porta ante ut sapien rutrum aliquam interdum a felis. Nulla auctor vestibulum enim, et luctus risus interdum eu. Quisque id arcu ultricies turpis posuere varius vitae varius quam. Nam non rhoncus eros. Proin posuere fringilla placerat. Nullam fermentum odio quis neque dapibus ornare. Sed pellentesque eros vel nisl efficitur cursus. Proin dictum velit in aliquam aliquet.
- Sed laoreet lacus eu metus consequat, in vehicula est volutpat
- Nullam laoreet libero tellus, ut dignissim leo luctus eu
- Nulla ac urna et lacus auctor ornare in eu nisi
- Pellentesque neque arcu, scelerisque id ligula at, hendrerit porta felis
- Aenean feugiat dapibus dolor, pulvinar vulputate orci vehicula sed
- Suspendisse non sem nisi
- In quis odio ex
- Donec porta sodales blandit