From: Jeremy Thomas Date: Mon, 9 Apr 2018 12:18:46 +0000 (+0100) Subject: Component links X-Git-Tag: 0.7.0~1^2~53 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e75fd365e380110b52e5ffcd70cc3b621e336cc4;p=thirdparty%2Fbulma.git Component links --- diff --git a/docs/_data/links.json b/docs/_data/links.json index 187dc34e0..f7abf8556 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -43,9 +43,54 @@ "button": { "name": "Button", "path": "/documentation/elements/button" + }, + "components": { + "name": "Components", + "path": "/documentation/components" + }, + "components-breadcrumb": { + "name": "Breadcrumb", + "path": "/documentation/components/breadcrumb" + }, + "components-card": { + "name": "Card", + "path": "/documentation/components/card" + }, + "components-dropdown": { + "name": "Dropdown", + "path": "/documentation/components/dropdown" + }, + "components-menu": { + "name": "Menu", + "path": "/documentation/components/menu" + }, + "components-message": { + "name": "Message", + "path": "/documentation/components/message" + }, + "components-modal": { + "name": "Modal", + "path": "/documentation/components/modal" + }, + "components-navbar": { + "name": "Navbar", + "path": "/documentation/components/navbar" + }, + "components-pagination": { + "name": "Pagination", + "path": "/documentation/components/pagination" + }, + "components-panel": { + "name": "Panel", + "path": "/documentation/components/panel" + }, + "components-tabs": { + "name": "Tabs", + "path": "/documentation/components/tabs" } }, "order": { - "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"] + "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], + "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"] } } diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index bd4b64ecf..a6e56f7ad 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -1,12 +1,21 @@ --- title: Breadcrumb +subtitle: "A simple breadcrumb component to improve your navigation experience" layout: documentation doc-tab: components doc-subtab: breadcrumb +breadcrumb: +- home +- documentation +- components +- components-breadcrumb +meta: +- since: "0.4.3" +- variables: true +- colors: false +- sizes: true --- -{% include subnav/subnav-components.html %} - {% capture breadcrumb_example %} {% endcapture %} -
-
- -

Breadcrumb

-

- A simple breadcrumb component to improve your navigation experience -

- {% - include meta.html - since="0.4.3" - variables=true - colors=false - sizes=true - %} - -
- -
-

The breadcrumb component only requires a .breadcrumb container and a ul list.

-

The dividers are automatically created in the content of the ::before pseudo-element of li tags.

-

You can inform the current page using the is-active modifier in a li tag. It will disable the navigation of inner links.

-
- -
- {% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} +
+

The breadcrumb component only requires a .breadcrumb container and a ul list.

+

The dividers are automatically created in the content of the ::before pseudo-element of li tags.

+

You can inform the current page using the is-active modifier in a li tag. It will disable the navigation of inner links.

+
- {% include anchor.html name="Alignment" %} +
+{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} -
-

For alternative alignments, use the is-centered and is-right modifiers on the .breadcrumb container.

-
+{% include anchor.html name="Alignment" %} - {% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} +
+

For alternative alignments, use the is-centered and is-right modifiers on the .breadcrumb container.

+
- {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} - {% include anchor.html name="Icons" %} +{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} -
-

You can use any of the Font Awesome icons.

-
+{% include anchor.html name="Icons" %} - {% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} +
+

You can use any of the Font Awesome icons.

+
- {% include anchor.html name="Alternative separators" %} +{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} -
-

You can choose between 4 additional separators: has-arrow-separator has-bullet-separator has-dot-separator and has-succeeds-separator.

-
+{% include anchor.html name="Alternative separators" %} - {% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} +
+

You can choose between 4 additional separators: has-arrow-separator has-bullet-separator has-dot-separator and has-succeeds-separator.

+
- {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} - {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} - {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} - {% include anchor.html name="Sizes" %} +{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} -
-

You can choose between 3 additional sizes: is-small is-medium and is-large.

-
+{% include anchor.html name="Sizes" %} - {% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} +
+

You can choose between 3 additional sizes: is-small is-medium and is-large.

+
- {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} - {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} - {% include variables.html type='component' %} +{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index 466a12dbb..c74fb6818 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -1,8 +1,18 @@ --- title: Card +subtile: "An all-around flexible and composable component" layout: documentation doc-tab: components doc-subtab: card +breadcrumb: +- home +- documentation +- components +- components-card +meta: +- variables: true +- colors: false +- sizes: false --- {% capture card_example %} @@ -89,102 +99,84 @@ doc-subtab: card {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Card

-

An all-around flexible and composable component

- {% - include meta.html - variables=true - colors=false - sizes=false - %} - -
- -
-

The card component comprises several elements that you can mix and match:

+
+

The card component comprises several elements that you can mix and match:

+
    +
  • + card: the main container
    • - card: the main container + card-header: a horizontal bar with a shadow
      • - card-header: a horizontal bar with a shadow -
          -
        • - card-header-title: a left-aligned bold text -
          • -
        • - card-header-icon: a placeholder for an icon -
          • -
        -
        • -
      • - card-image: a fullwidth container for a responsive image + card-header-title: a left-aligned bold text
      • - card-content: a multi-purpose container for any other element + card-header-icon: a placeholder for an icon
        • +
      +
      • +
    • + card-image: a fullwidth container for a responsive image +
      • +
    • + card-content: a multi-purpose container for any other element +
      • +
    • + card-footer: a horizontal list of controls +
      • - card-footer: a horizontal list of controls -
          -
        • - card-footer-item: a repeatable list item -
          • -
        + card-footer-item: a repeatable list item
    -
- -
- New - 0.5.3 -
- -
-

- You can center the card-header-title by appending the is-centered modifier. -

-
+ + +
-
+
+ New + 0.5.3 +
-
-
- {{card_example}} -
-
- {% highlight html %}{{card_example}}{% endhighlight %} -
-
+
+

+ You can center the card-header-title by appending the is-centered modifier. +

+
-
+
-
-
- {{card_header_example}} -
-
- {% highlight html %}{{card_header_example}}{% endhighlight %} -
-
+
+
+ {{card_example}} +
+
+ {% highlight html %}{{card_example}}{% endhighlight %} +
+
-
+
-
-
- {{card_title_example}} -
-
- {% highlight html %}{{card_title_example}}{% endhighlight %} -
-
+
+
+ {{card_header_example}} +
+
+ {% highlight html %}{{card_header_example}}{% endhighlight %} +
+
- {% include variables.html type='component' %} +
+
+
+ {{card_title_example}} +
+
+ {% highlight html %}{{card_title_example}}{% endhighlight %}
-
+ + +{% include variables.html type='component' %} diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html index f470f4879..07f600586 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -1,8 +1,18 @@ --- title: Dropdown +subtitle: "An interactive dropdown menu for discoverable content" layout: documentation doc-tab: components doc-subtab: dropdown +breadcrumb: +- home +- documentation +- components +- components-dropdown +meta: +- colors: false +- sizes: false +- variables: true --- {% capture dropdown_example %} @@ -188,161 +198,138 @@ doc-subtab: dropdown {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
- -

Dropdown

-

- An interactive dropdown menu for discoverable content -

- {% - include meta.html - new=true - since="0.4.4" - colors=false - sizes=false - variables=true - %} - -
- -
-

- The dropdown component is a container for a dropdown button and a dropdown menu. -

+
+

+ The dropdown component is a container for a dropdown button and a dropdown menu. +

+
    +
  • + dropdown the main container
    • - dropdown the main container + dropdown-trigger the container for a button +
      • +
    • + dropdown-menu the toggable menu, hidden by default
      • - dropdown-trigger the container for a button -
        • -
      • - dropdown-menu the toggable menu, hidden by default + dropdown-content the dropdown box, with a white background and a shadow
        • - dropdown-content the dropdown box, with a white background and a shadow -
            -
          • - dropdown-item each single item of the dropdown, which can either be a a or a div -
            • -
          • - dropdown-divider a horizontal line to separate dropdown items -
            • -
          + dropdown-item each single item of the dropdown, which can either be a a or a div +
          • +
        • + dropdown-divider a horizontal line to separate dropdown items
    -
+ + +
-
-
- {{dropdown_example}} -
-
- {% highlight html %}{{dropdown_example}}{% endhighlight %} -
-
+
+
+ {{dropdown_example}} +
+
+ {% highlight html %}{{dropdown_example}}{% endhighlight %} +
+
- {% include anchor.html name="Dropdown content" %} +{% include anchor.html name="Dropdown content" %} -
-

- While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content. -

-
+
+

+ While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content. +

+
-
-
- {{dropdown_content_example}} -
-
- {% highlight html %}{{dropdown_content_example}}{% endhighlight %} -
-
+
+
+ {{dropdown_content_example}} +
+
+ {% highlight html %}{{dropdown_content_example}}{% endhighlight %} +
+
- {% include anchor.html name="Hoverable or Toggable" %} +{% include anchor.html name="Hoverable or Toggable" %} -
-

- The dropdown component has 2 additional modifiers -

-
    -
  • - is-hoverable: the dropdown will show up when hovering the dropdown-trigger -
    • -
  • - is-active: the dropdown will show up all the time -
    • -
-
+
+

+ The dropdown component has 2 additional modifiers +

+
    +
  • + is-hoverable: the dropdown will show up when hovering the dropdown-trigger +
    • +
  • + is-active: the dropdown will show up all the time +
    • +
+
-
-

- While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. -

-
+
+

+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. +

+
-
-
- {{dropdown_click_example}}{{dropdown_info_example}} -
-
- {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %} -
-
+
+
+ {{dropdown_click_example}}{{dropdown_info_example}} +
+
+ {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %} +
+
- {% include anchor.html name="Right aligned" %} +{% include anchor.html name="Right aligned" %} -
-

- You can add the is-right modifier to have a right-aligned dropdown. -

-
+
+

+ You can add the is-right modifier to have a right-aligned dropdown. +

+
-
-
-
-
-
- {{dropdown_left_example}} -
-
-
-
- {{dropdown_right_example}} -
-
+
+
+
+
+
+ {{dropdown_left_example}}
-
- {% highlight html %}{{dropdown_right_example}}{% endhighlight %} +
+
+ {{dropdown_right_example}} +
+
+
+ {% highlight html %}{{dropdown_right_example}}{% endhighlight %} +
+
- {% include anchor.html name="Dropup" %} - -
-

- You can add the is-up modifier to have a dropdown menu that appears above the dropdown button. -

-
- -
-
- {{ dropdown_up_example }} -
-
- {% highlight html %}{{dropdown_up_example}}{% endhighlight %} -
-
+{% include anchor.html name="Dropup" %} - {% include variables.html type='component' %} +
+

+ You can add the is-up modifier to have a dropdown menu that appears above the dropdown button. +

+
+
+
+ {{ dropdown_up_example }}
-
+
+ {% highlight html %}{{dropdown_up_example}}{% endhighlight %} +
+ + +{% include variables.html type='component' %} diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index def25cf23..34a83c08b 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -1,8 +1,18 @@ --- title: Menu +subtitle: "A simple menu, for any type of vertical navigation" layout: documentation doc-tab: components doc-subtab: menu +breadcrumb: +- home +- documentation +- components +- components-menu +meta: +- colors: false +- sizes: false +- variables: true --- {% capture menu_example %} @@ -42,24 +52,6 @@ doc-subtab: menu {% endcapture %} -{% include subnav/subnav-components.html %} +{% include snippet.html content=menu_example size="one-third" %} -
-
-

Menu

-

A simple menu, for any type of vertical navigation

- {% - include meta.html - colors=false - sizes=false - variables=true - %} - -
- - {% include snippet.html content=menu_example size="one-third" %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index 9e320ed73..c9ef74405 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -1,8 +1,18 @@ --- title: Message +subtitle: "Colored message blocks, to emphasize part of your page" layout: documentation doc-tab: components doc-subtab: message +meta: +- colors: true +- sizes: true +- variables: true +breadcrumb: +- home +- documentation +- components +- components-message --- {% capture message_example %} @@ -108,48 +118,28 @@ doc-subtab: message {% endfor %} {% endcapture %} -{% include subnav/subnav-components.html %} +{% include snippet.html content=message_example %} -
-
-

Messages

-

- Colored message blocks, to emphasize part of your page -

- {% - include meta.html - colors=true - sizes=true - variables=true - %} +{% include anchor.html name="Colors" %} -
+{% include snippet.html content=message_colors_example %} - {% include snippet.html content=message_example %} +{% include anchor.html name="Message body only" %} - {% include anchor.html name="Colors" %} +
+

You can omit the message header:

+
- {% include snippet.html content=message_colors_example %} +{% include snippet.html content=message_body_example %} - {% include anchor.html name="Message body only" %} +{% include anchor.html name="Sizes" %} -
-

You can omit the message header:

-
+{% include snippet.html content=message_small %} - {% include snippet.html content=message_body_example %} +{% include snippet.html content=message_normal %} - {% include anchor.html name="Sizes" %} +{% include snippet.html content=message_medium %} - {% include snippet.html content=message_small %} +{% include snippet.html content=message_large %} - {% include snippet.html content=message_normal %} - - {% include snippet.html content=message_medium %} - - {% include snippet.html content=message_large %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index 30cd3e1a5..c044eb6ee 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -1,8 +1,18 @@ --- title: Modal +subtitle: "A classic modal overlay, in which you can include any content you want" layout: documentation doc-tab: components doc-subtab: modal +meta: +- colors: false +- sizes: false +- variables: true +breadcrumb: +- home +- documentation +- components +- components-modal --- {% capture modal %} @@ -46,91 +56,73 @@ doc-subtab: modal {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Modal

-

A classic modal overlay, in which you can include any content you want

- {% - include meta.html - colors=false - sizes=false - variables=true - %} - -
- -
-

The modal structure is very simple:

+
+

The modal structure is very simple:

+
    +
  • + modal: the main container
    • - modal: the main container -
        -
      • - modal-background: a transparent overlay that can act as a click target to close the modal -
        • -
      • - modal-content: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include any content -
        • -
      • - modal-close: a simple cross located in the top right corner -
        • -
      + modal-background: a transparent overlay that can act as a click target to close the modal +
      • +
    • + modal-content: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include any content +
      • +
    • + modal-close: a simple cross located in the top right corner
    -

    - -

    -
- - {% highlight html %}{{ modal }}{% endhighlight %} + + +

+ +

+
-
-

To activate the modal, just add the is-active modifier on the .modal container

-
+{% highlight html %}{{ modal }}{% endhighlight %} -
-
- No JavaScript -
-
- Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself. -
-
+
+

To activate the modal, just add the is-active modifier on the .modal container

+
-
+
+
+ No JavaScript +
+
+ Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself. +
+
-

Image modal

+
-
-

Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:

-

- Launch image modal -

-
+

Image modal

- {% highlight html %}{{ image_modal }}{% endhighlight %} +
+

Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:

+

+ Launch image modal +

+
-
+{% highlight html %}{{ image_modal }}{% endhighlight %} -

Modal card

+
-
-

If you want a more classic modal, with a head, a body and a foot, use the modal-card.

-

- -

-
+

Modal card

-
- {% highlight html %}{{ modal_card }}{% endhighlight %} -
+
+

If you want a more classic modal, with a head, a body and a foot, use the modal-card.

+

+ +

+
- {% include variables.html type='component' %} +
+ {% highlight html %}{{ modal_card }}{% endhighlight %} +
-
-
+{% include variables.html type='component' %} {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Tabs

-

Simple responsive horizontal navigation tabs, with different styles

- {% - include meta.html - since="0.4.4" - colors=false - sizes=true - variables=true - %} - -
- -
-

Tabs only require a tabs container and a <ul> list.
- The default tabs style has a single border at the bottom.

-
- - {% include snippet.html content=tabs_example horizontal=true %} +
+

Tabs only require a tabs container and a <ul> list.
+ The default tabs style has a single border at the bottom.

+
- {% include snippet.html content=tabs_example horizontal=true more=true %} +{% include snippet.html content=tabs_example horizontal=true %} - {% include anchor.html name="Alignment" %} +{% include snippet.html content=tabs_example horizontal=true more=true %} -
-

- To align the tabs list, use the is-centered or is-right modifier on the .tabs container: -

-
+{% include anchor.html name="Alignment" %} - {% include snippet.html content=tabs_centered_example horizontal=true more=true %} +
+

+ To align the tabs list, use the is-centered or is-right modifier on the .tabs container: +

+
- {% include snippet.html content=tabs_right_example horizontal=true more=true %} +{% include snippet.html content=tabs_centered_example horizontal=true more=true %} - {% include anchor.html name="Icons" %} +{% include snippet.html content=tabs_right_example horizontal=true more=true %} -
-

You can use any of the Font Awesome icons.

-
+{% include anchor.html name="Icons" %} - {% include snippet.html content=tabs_icons_example horizontal=true more=true %} +
+

You can use any of the Font Awesome icons.

+
- {% include snippet.html content=tabs_icons_example horizontal=true more=true %} +{% include snippet.html content=tabs_icons_example horizontal=true more=true %} - {% include anchor.html name="Sizes" %} -
-

You can choose between 3 additional sizes: is-small is-medium and is-large.

-
+{% include snippet.html content=tabs_icons_example horizontal=true more=true %} - {% include snippet.html content=tabs_small_example horizontal=true more=true %} +{% include anchor.html name="Sizes" %} +
+

You can choose between 3 additional sizes: is-small is-medium and is-large.

+
- {% include snippet.html content=tabs_medium_example horizontal=true more=true %} +{% include snippet.html content=tabs_small_example horizontal=true more=true %} - {% include snippet.html content=tabs_large_example horizontal=true more=true %} +{% include snippet.html content=tabs_medium_example horizontal=true more=true %} - {% include anchor.html name="Styles" %} +{% include snippet.html content=tabs_large_example horizontal=true more=true %} -
- If you want a more classic style with borders, just append the is-boxed modifier. -
+{% include anchor.html name="Styles" %} - {% include snippet.html content=tabs_boxed_example horizontal=true more=true %} +
+ If you want a more classic style with borders, just append the is-boxed modifier. +
-

- If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier. -

+{% include snippet.html content=tabs_boxed_example horizontal=true more=true %} - {% include snippet.html content=tabs_toggle_example horizontal=true more=true %} +

+ If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier. +

- {% include elements/new-tag.html version="0.6.2" %} +{% include snippet.html content=tabs_toggle_example horizontal=true more=true %} -

- If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded. -

+{% include elements/new-tag.html version="0.6.2" %} - {% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %} +

+ If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded. +

-

- If you want the tabs to take up the whole width available, use is-fullwidth. -

+{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %} - {% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %} +

+ If you want the tabs to take up the whole width available, use is-fullwidth. +

- {% include anchor.html name="Combining" %} +{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %} -
-

You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.

-
+{% include anchor.html name="Combining" %} - {% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} +
+

You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.

+
- {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} +{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} - {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %} +{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} - {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} +{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %} - {% include variables.html type='component' %} +{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} -
-
+{% include variables.html type='component' %}