ComboStrap UI - Slide

Table of Contents

About

A slide is an ui component that divides a page in horizontal region through the use of background (and therefore without any margin).

They are mainly used in landing page where they separate and add contrast between region.

Since version 1.13

Syntax

<slide size="md|sm|lg|xl">
   <background></background>
   <backgrounds>
       <background></background>
       ...
       <background></background>
   </backgrounds>
   <separator></separator>
   My Slide
</slide>

where:

  • size defines the space around the text (padding) and is one of:
    • sm : small
    • md : medium (default)
    • lg : large
    • xl : extra-large
  • background is the optional background definition

This is also an super HTML component and accepts therefore all styling attributes

Example

Slide with a blue background

<slide color="white" text-align="center" background-color="blue">
    <title 2>A blue slide</title>
    <typo lead>
**A unique collection of UI elements that are all flexible, modular and composable.  \\
A complete solution to building a professional website.**
     </typo>
</slide>

A blue slide

A unique collection of UI elements that are all flexible, modular and composable.
A complete solution to building a professional website.

Slide with a background image

<slide color="steelblue" text-align="center" >
   <background>{{:docs:block:stock_image_surfer_in_the_see.png|}}</background>
    <title 2>A blue slide</title>
    <typo lead>
**A unique collection of UI elements that are all flexible, modular and composable.  \\
A complete solution to building a professional website.**
     </typo>
</slide>

A blue slide

A unique collection of UI elements that are all flexible, modular and composable.
A complete solution to building a professional website.

Separator

Powered by ComboStrap