diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md index ba01d688b..47a888a57 100644 --- a/pages/_docs/alerts.md +++ b/pages/_docs/alerts.md @@ -1,13 +1,15 @@ --- title: Alerts menu: docs.alerts -description: Bootstrap provides an easy way to create predefined alert messages. +description: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app. bootstrap-link: components/alerts/ --- ## Default markup +Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action. + {% capture code %} {% for variant in site.variants %} {% capture variant-text %} @@ -19,9 +21,9 @@ bootstrap-link: components/alerts/ {% include example.html code=code %} -## Alert Links +## Alert links -Add the `alert-link` class to any links inside the alert box to create "matching colored links": +Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. {% capture code %} {% for variant in site.variants %} @@ -34,7 +36,9 @@ Add the `alert-link` class to any links inside the alert box to create "matching {% include example.html code=code %} -## Dismissible Alerts +## Dismissible alerts + +Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it. {% capture code %} {% for variant in site.variants %} @@ -49,6 +53,8 @@ Add the `alert-link` class to any links inside the alert box to create "matching ## Alerts with icons +Add an icon to your alert modal to make it more user-friendly and help users easily identify the message. + {% capture code %} {% for variant in site.variants %} {% capture variant-text %} @@ -62,6 +68,8 @@ Add the `alert-link` class to any links inside the alert box to create "matching ## Alert with avatar +Add an avatar to your alert modal to make it more personalised. + {% capture code %} {% for variant in site.variants %} {% capture variant-text %} @@ -75,6 +83,8 @@ Add the `alert-link` class to any links inside the alert box to create "matching ## Alert with buttons +Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message. + {% capture code %} {% capture variant-text %}

Some Title

diff --git a/pages/_docs/autosize.md b/pages/_docs/autosize.md index a1e394383..5eee40efa 100644 --- a/pages/_docs/autosize.md +++ b/pages/_docs/autosize.md @@ -1,13 +1,15 @@ --- title: Autosize menu: docs.autosize -description: A small, stand-alone script to automatically adjust textarea height. +description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type. done: true --- ## Default markup +Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it. + {% capture code %} {% include ui/form/textarea-autosize.html %} diff --git a/pages/_docs/carousel.md b/pages/_docs/carousel.md index 1f3bf1ee2..fc7a9c72b 100644 --- a/pages/_docs/carousel.md +++ b/pages/_docs/carousel.md @@ -1,13 +1,15 @@ --- title: Carousel menu: docs.carousel -description: The Carousel is a slideshow for cycling through elements. +description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information. bootstrap-link: components/carousel/ --- ## Default markup +Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow. + {% capture code %} {% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %} {% endcapture %} diff --git a/pages/_docs/empty.md b/pages/_docs/empty.md index a91b9796b..360f34f72 100644 --- a/pages/_docs/empty.md +++ b/pages/_docs/empty.md @@ -1,11 +1,13 @@ --- title: Empty states -description: Empty states/blanks are commonly used as placeholders for first time use, empty data or error screens. +description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app. --- ## Default markup +Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action. + {% capture code %} {% include ui/empty.html %} {% endcapture %} @@ -14,6 +16,8 @@ description: Empty states/blanks are commonly used as placeholders for first tim ## Empty state with illustration +Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalised design, you will improve your brand image and make your website or app more user friendly. + {% capture code %} {% include ui/empty.html illustration=true %} {% endcapture %} diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md index 79549c811..fb81f5461 100644 --- a/pages/_docs/toasts.md +++ b/pages/_docs/toasts.md @@ -1,13 +1,15 @@ --- title: Toasts menu: docs.toasts -description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.). +description: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action. bootstrap-link: components/toasts/ --- ## Default markup +Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an `x` close button to make it possible for users to close the toast if they wish. + {% capture code %} {% include ui/toast.html %} {% endcapture %} @@ -16,7 +18,7 @@ bootstrap-link: components/toasts/ ## Translucent -Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast. +Toasts blend over the elements they appear over. If a browser supports the `backdrop-filter` CSS property, the elements under a toast will be blurred. {% capture code %} {% include ui/toast.html %} @@ -26,7 +28,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app ## Stacking toasts -If you want to stack toasts just put them in the same container. +Stack multiple toasts together by putting them within one container. {% capture code %} {% include ui/toast.html person-id=3 %}