Button
The button component displays HTML links, buttons, and inputs into prominent, call-to-action, interactable elements.
Usage
Button components should be used when a regular link, button, or input needs to be more visually prominent in order to gain a user's attention or convey importance compared to surrounding, interactable elements.
Structure
To convert a link, button, or input into a button, add a .cwf-button class to it. When in the T4 WYSIWYG editor, highlight the link or button you want to convert into a button, and select Format -> Formats -> t4_button; This will wrap the interactable element in a .t4_button element, which has the same desired effect.
Styles
Buttons are relatively large and pill-shaped, with a blue background, lighter blue border, and white text. When hovered, the text will turn a dark gray and the background will shift to a lighter blue. There are no variations or layout optins.
Custom CSS properties
--cwf-button--background-color- The button's background color (default#006894).--cwf-button--border-color- The button's border color (default#00a5eb).--cwf-button--color- The button's text color (default#fff).--cwf-button--active--background-color- The button's active background color (default#004f70).--cwf-button--active--color- The button's active text color (default#fff).--cwf-button--hover-focus--background-color- The button's hover/focus background color (default#00a5eb).--cwf-button--hover-focus--color- The button's hover/focus text color (default#333).
Functionality
There is no button-specific Javascript included.
T4 implementation
The button component is not tied to a specific content type, and both the .cwf-button and .t4_button classes are automatically included in the Compass T4 page layout. It is advised to us the T4-specific class when working within a T4 WYSIWYG editor.
Examples
Link
Aenean ut ullamcorper ante. Nulla imperdiet ante in condimentum dapibus. Nulla mollis lectus at bibendum gravida. Vivamus dignissim fringilla dui sit amet bibendum. Vivamus sed tempus est, a consequat nisi. In dictum sem nec nisi aliquet sollicitudin. Vestibulum imperdiet, dui in lacinia eleifend, urna massa fringilla tellus, at imperdiet magna dolor vitae tortor. Curabitur at quam vel ex condimentum commodo. Nam in scelerisque nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris varius hendrerit Blog . Vestibulum lacinia nisi non elit auctor porta. Aliquam mauris orci, efficitur sed lobortis ut, lacinia sed mauris. Etiam efficitur dui dui, ac semper est rhoncus nec. Quisque vulputate a eros sit amet iaculis.
Button
Phasellus consectetur magna nec ipsum vehicula consequat. Aenean id lacus arcu. Proin maximus dapibus lacus, sit amet lacinia ligula. Maecenas hendrerit erat tortor, eget vehicula nunc feugiat at. Maecenas dapibus cursus justo, eget consectetur ipsum varius sed. Curabitur lobortis augue diam, suscipit semper ex pharetra eu. Maecenas vel dui ac risus suscipit gravida. Proin commodo accumsan lorem, ac semper diam luctus et. Maecenas rhoncus gravida libero id ullamcorper. Etiam pharetra sagittis lacus at feugiat. Nullam a risus bibendum, posuere sapien vel, convallis . Morbi massa odio, ultrices et lacinia non, lobortis eget ligula. Nullam facilisis imperdiet ligula, ac auctor dui porta sit amet.