Documentation for our Alloy Components, the mechanics to extend their functionality with Angular.
Components
- Accordion
- Button
- Buttonimg
- Card-accordion
- Card-accordion–css
- Conic-gradient
- Details-summary
- Drawing-tool
- Loading
- Map
- Modal
- Pagination
- Pie-charts
- Skeleton
- Slide-out-card
- Svg-mask
- Tabs
- Video-box
Full list (to be populated…)
- Alert - closable alert with accessible button
- Article
- Banner - brandon, girlguiding and element78 (using picture and optional gradient overlay instead of inline style background-image)
- Breadcrumbs - brandon
- Button groups - based on Old Alloy Button Groups
- Button menus - based on Old Alloy Menus
- Card - include technique from FoodForLife blog card where a:before overlays whole card, also heydon, Basic card, info-card, double-sided
- Cardfader
- Cardslider - include future idea to have it swipable with touch event
- Checkboxes - SVG opt-in switch from girlguiding
- Figure - different figure types, not just images.
- Flash
- Form Input Select - Examples, Use TomCheckley’s radio/checkbox custom select; a fully stylable button with a select; a custom (a11y-passed) select from technica11y webinar with example.
- Gridder
- Inset - see .card-inset–band in LDC top50 (transform of a stripe containing text)
- Modal - role=dialog
- Modeless
- Navigation - use brandon trust, but may need better aria-expanded, aria-current and keyboard navigating. Multiple examples of navigations for both desktop and mobile. FoodForLife has good base (distinct link to page and an ajoining button to expand sub-items).
- Parallax - CSS-only
- Pointer - The technique (or similar) from JqueryAlloy (in Callout, Popovers and Tags) to add an SVG shape (eg, pointer)
- Progress Bar - checkout progress steps (horizontal bars with circles as steps - similar to LDC “.uspList” on homepage)
- Scrollbar - Themed scroolbar examples, eg, new css-tricks.com (beware compatibility and jaring to system device look and feel)
- ScrollSpy
- SideSlider - needs to be more accessible. Would be good to have a list of all types of sliders that we have, and the difference between. And make them more interactive (touch to scroll, not button-controlled)
- Toasts
- Tooltips - should be ubiquitous for all icons without a visible label.
- Well - useful to keep as a naming convention for ‘extra info content’
- Video box - youtube video container, eg .casestudyCard–video replaces image with youtube iframe.