diff --git a/README.md b/README.md index 4919d16..1fcfadf 100644 --- a/README.md +++ b/README.md @@ -6,23 +6,40 @@ Links: **[ilw-call-to-action in Builder](https://builder3.toolkit.illinois.edu/c ## Overview -A 1-3 paragraph explanation of what the component does and how it presents. +The call to action component is used to prompt visitors to perform an action or a few related actions, such as subscribing to a newsletter or beginning an application. + +It can contain a link or group of links and may include an icon. It uses a background that contrasts with content around it to draw attention and add visual separation. + +By default, the call to action is shown with a gray background and start-aligned +text. There are a few attributes to control the component: + +- The left side can have an icon using `slot="icon"`, which will move to be above + the heading in smaller screen sizes. +- Color themes for `white`, `blue` and `blue-gradient`. For example, `theme="blue"`. +- Text content can be centered using `align="center"`. With large screen sizes, + the icon slot will remain on the left, and the text center aligns in its + container. ## Code Examples ```html - + + +

Training Opportunities

+

Need more in-depth guidance on building Illinois websites? Check out these resources.

+ +
``` -## Accessibility Notes and Use - -Consider accessibility, both for building the component and for its use: - -- Is there sufficient color contrast? -- Can the component be fully understood without colors? -- Does the component need alt text or ARIA roles? -- Can the component be navigated with a keyboard? Is the tab order correct? -- Are focusable elements interactive, and interactive elements focusable? -- Are form fields, figures, fieldsets and other interactive elements labelled? +## Accessibility Notes -## External References +- Make sure to use the **correct heading level** in relation to the call to + action's position in the page. +- The **icon** should always be decorative, and as such should have an empty + `alt=""` attribute. For inline `svg`, use `aria-hidden="true"`. +- **Centered text** can be harder to read, so avoid using longer text when + center aligning. +- Make sure links and buttons are descriptive, using `ilw-sr-only` if needed to add context.