Text Carousel

Example Text Carousel – View in live Demo Site >

Recommended Usage

Text Carousels are a series of small text box links displayed in a single row, each with a small heading and paragraph text. Users can browse through the different text boxes using the arrows on the left and right side of the carousel. It should only be used if you have 6 or more related content items prepared that you can link to. Otherwise, please consider the Mega Buttons, Mega Icons, or Story Tiles components instead.

Component Fields:
Each Text Carousel item consists of a Title, Text, Link URL field.

Interactivity:
Users can browse through the different text boxes using the arrows on the left and right side of the carousel. The background colour of text boxes changes on mouse hover. On desktop view, arrows will appear on the Text Carousel once there are 6 items to browse through. On tablets, arrows will appear once there are 5 items. On mobile devices, arrows will show when there is more than 1 item to swipe through.

Mobile/Tablet:
When viewed on mobile devices, this component will only display the first text box in the sequence as well as the left and right arrows. Users can either tap the arrows or use a swipe gesture to sort through the text boxes.


How to add a Text Carousel component

  1. Add a Page Section.
  2. Click Add New Inside Content Row  and select Single Column Row.
  3. Click Add Component button > select Text Carousel.
  4. Click Add Text Carousel Item button to add individual text boxes.
  5. At the top, select your desired Style.
    1. Dark Blue – Generates text boxes with a dark blue background colour (UBC Primary Blue)
    2. Light Blue – Generates text boxes with a light blue background colour
  6. Add your Title.
  7. Add your Text.
  8. Add your Link URL.
  9. Reorder your Text Carousel boxes by dragging and dropping each item to your desired order. Hover over the numbered grey bar on the far left to click and drag each item up or down.
  10. Click Preview to often to test your Text Carousel. Make edits as necessary.
  11. Publish/Update when ready to go live.


Do’s and Don’ts

  • BE CONCISE. Space is very, very limited inside the Text Carousel component. Fewer words in the text box allow for more flexibility on smaller mobile/tablet screens.
  • Try to keep your word counts even between text boxes. Maximum of a 2-3 word heading and 1 short sentence.
  • Test your Text Carousel often. Make sure you are writing concisely and leaving room at the bottom of each box.
  • Consider using a different component to link to your page or post unless you have a minimum of 6 items ready for the Text Carousel.
  • Do use Text Carousels to link to interesting stories and features in your site.
  • Don’t use Text Carousels to force users to browse your website with Text Carousels as the primary way to navigate.

Availability

This component is available in the Single column row on the Faculty and Department theme.