docs update

docs/ui/components/cards.mdx

@@ -8,7 +8,7 @@ bootstrapLink: components/card/
 
 Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.
 
-```html example code centered columns={1}
+```html example code centered columns={1} background="base"
 <div class="card">
   <div class="card-body">
     <p>This is some text within a card body.</p>
@@ -22,7 +22,7 @@ You can change the padding of a newly created card. To do it, use the `.card-sm`
 
 Cards with the `.card-sm` class are well suited for small items such as widgets, etc., while the `.card-lg` class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.
 
-```html example vertical centered separated height={500}
+```html example vertical centered separated height={500} background="base"
 <div class="card card-sm">
   <div class="card-body">
     This is some text within a card body.
@@ -56,7 +56,7 @@ Cards with the `.card-sm` class are well suited for small items such as widgets,
 
 Add a title to your card by including the `.card-title` class within `.card-body`. You can also place the title inside the `.card-header` element to separate the title from the content with a horizontal line.
 
-```html code example vertical centered separated height={400}
+```html code example vertical centered separated height={400} background="base"
 <div class="card">
   <div class="card-body">
     <h3 class="card-title">Card title</h3>
@@ -77,7 +77,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
 
 To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your interface design and draw users' attention.
 
-```html example centered columns={1} height={500} code
+```html example centered columns={1} height={500} code background="base"
 <div class="card">
   <!-- Photo -->
   <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(/samples/photos/cup-of-coffee-and-an-open-book.jpg)"></div>
@@ -93,7 +93,7 @@ To create a more visually appealing card, add a title and an image. Thanks to th
 
 Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the `.card-img-top` class. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
 
-```html example centered columns={1} height={600} code
+```html example centered columns={1} height={600} code background="base"
 <div class="card d-flex flex-column">
   <a href="#">
     <img class="card-img-top" src="/samples/photos/book-on-the-grass.jpg" alt="" />
@@ -123,7 +123,7 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
 
 Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
 
-```html code example centered height="220px"
+```html code example centered height="220px" background="base"
 <div class="row row-deck">
   <div class="col-md-4">
     <div class="card">
@@ -147,7 +147,7 @@ Add the `.row-deck` class to `.row`, if you want to display several cards next t
 
 You can also add an image on the left side of the card. To do it, add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element and it will be automatically centered and scaled to the right size.
 
-```html example columns={2} centered height={400} code
+```html example columns={2} centered height={400} code background="base"
 <div class="card d-flex flex-column">
   <div class="row row-0 flex-fill">
     <div class="col-md-3">
@@ -183,7 +183,7 @@ You can also add an image on the left side of the card. To do it, add the `.card
 
 Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching.
 
-```html example columns={2} centered height={400}
+```html example columns={2} centered height={400} background="base"
 <div class="row row-deck">
   <div class="col-md-6">
     <div class="card">
@@ -231,7 +231,7 @@ Add a status color to your card, either at the top or on the side of the card, t
 
 Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
 
-```html code example columns={1} centered height={300}
+```html code example columns={1} centered height={300} background="base"
 <div class="card card-stacked">
   <div class="card-body">
     <h3 class="card-title">Stacked card</h3>
@@ -245,7 +245,7 @@ Use the `card-stacked` class to stack up multiple cards, if you want to save scr
 
 Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily.
 
-```html example columns={2} centered height={400}
+```html example columns={2} centered height={400} background="base"
 <div class="card-tabs">
   <ul class="nav nav-tabs">
     <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>

docs/ui/components/ribbons.mdx

@@ -7,7 +7,7 @@ description: Ribbons are graphical elements which attract users' attention to a
 
 Use the `ribbon` class to add the default ribbon to any section of your interface.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -42,7 +42,7 @@ You can change the position of a ribbon by adding one of the following classes t
 
 Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -70,7 +70,7 @@ Using multiple classes at once will give you more position options. For example,
 
 Customize the ribbon's background color. You can click [here](/docs/ui/colors) to see the list of available colors.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base" background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -98,7 +98,7 @@ Customize the ribbon's background color. You can click [here](/docs/ui/colors) t
 
 Add your own text to a ribbon to display any additional information and make it easy to spot for users.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -126,7 +126,7 @@ Add your own text to a ribbon to display any additional information and make it
 
 Change the style of a ribbon to make it go well with your interface design.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card w-100">
   <div class="card-body" style="height: 5rem">
   </div>

docs/ui/components/timelines.mdx

@@ -7,7 +7,7 @@ description: A timeline is a perfect way to visualize processes and projects, as
 
 The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.
 
-```html example height="400px" scrollable
+```html example height="400px" scrollable background="base"
 <ul class="timeline">
   <li class="timeline-event">
     <div class="timeline-event-icon bg-twitter-lt">
@@ -258,7 +258,7 @@ The available timeline design is comprised of many components that will help you
 
 Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.
 
-```html example height="400px" scrollable
+```html example height="400px" scrollable background="base"
 <ul class="timeline timeline-simple">
   <li class="timeline-event">
     <div class="timeline-event-icon bg-twitter-lt">