Storybook

Component Library

Buttons

Buttons should be easy to identify and interact with. They should be styled differently from regular text and should change appearance when hovered over or focused. Buttons should also be descriptive and provide context about what action they will perform.

Loading Spinner

Loading spinners are used to indicate that a page is loading or that an action is being processed. They should be used sparingly and only when necessary, as they can be distracting to users.

Page Synopsis Card

Similar to the single image card, this card is for displaying information about other pages. Used in search results and rollup pages.

Tag 1
Tag 2
Tag 3

Example Title

Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.

Single Image Card

Single image cards are used to display a link to and information about another page on or off of KET's websites.

Default Image Size

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius dicta, cupiditate rerum recusandae sunt nam distinctio nemo aspernatur tempore quos illum tempora? Totam a corporis, provident qui sapiente nemo ex.

Large Image

Wide Image

Tall Image

Accordion

Accordions (also known as the Details block in WordPress) display additional information on the page through an expand and collapse interaction. They are useful in FAQs and when providing additional information.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia est purus, eu accumsan nunc rutrum non

Accordion Item 2