< Context / Components

Tabs

Introduction

A series of tabs each containing content. When clicked the corresponding content shows.

Body

Options

An array of tabs to include in the component.

  • tab

    -text

    Title text that appears in the tab.

    content

    -HTML

    HTML content. Make sure the content is built in a fluid layout so it still works on mobile. no need to build in table layouts as this won't be seen in Outlook.

    attached

    -Boolean

If true the tabs are visually attached to the content in a traditional tab design style. If false the tabs float above the content like buttons.

Style

style

Styling on the component container.

Example

{
  "type": "tabs",
  "body": {
    "id": "test1",
    "options": [
      {
        "tab": "tab 1",
        "content": "<h3>Tab 1 Content</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed odio turpis. Nunc sollicitudin ex neque, eget scelerisque mi semper nec. Sed quis bibendum ipsum. Donec vitae lobortis tellus, eu condimentum urna. Phasellus sollicitudin nibh quis felis gravida commodo. Sed arcu eros, imperdiet eget est et, accumsan luctus justo.</p>"
      },
      {
        "tab": "tab 2",
        "content": "<h3>Tab 2 Content</h3><p>Nam gravida dolor ac feugiat mattis. Etiam pulvinar odio quis quam faucibus, eu pretium urna sollicitudin. Sed tincidunt ac mi non porta. Cras pellentesque rhoncus massa quis imperdiet. Donec ullamcorper mauris sapien, nec consectetur metus scelerisque quis. Mauris vel sem sapien. Donec tincidunt feugiat mauris nec tempor.</p>"
      }
    ],
    "attached": true
  },
  "style": {
    "width": "550",
    "background": {
      "color": "#ffffff"
    },
    "margin": {
      "top": "20",
      "right": "10",
      "bottom": "20",
      "left": "10"
    },
    "padding": {
      "top": "15",
      "right": "5",
      "bottom": "15",
      "left": "5"
    },
    "border": {
      "color": "",
      "width": "",
      "style": "",
      "radius": ""
    },
    "font": {
      "color": "",
      "decoration": "",
      "family": "",
      "style": "",
      "weight": "",
      "size": "",
      "align": "center"
    },
    "tabContent": {
      "width": "480",
      "background": {
        "color": "#ffffff"
      },
      "margin": {
        "top": "10",
        "right": "5",
        "bottom": "5",
        "left": "5"
      },
      "padding": {
        "top": "5",
        "right": "5",
        "bottom": "5",
        "left": "5"
      },
      "border": {
        "color": "#f69513",
        "width": "2",
        "style": "solid",
        "radius": "2"
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      },
      "font": {
        "color": "",
        "decoration": "",
        "family": "",
        "style": "",
        "weight": "normal",
        "size": "16",
        "align": "center"
      }
    },
    "tab": {
      "width": "80",
      "height": "20",
      "background": {
        "color": "#ffffff"
      },
      "margin": {
        "top": "0",
        "right": "0",
        "bottom": "0",
        "left": "5"
      },
      "padding": {
        "top": "5",
        "right": "5",
        "bottom": "5",
        "left": "5"
      },
      "border": {
        "color": "#f69513",
        "width": "2",
        "style": "solid",
        "radius": ""
      },
      "boxShadow": {
        "horizontalOffset": "",
        "verticalOffset": "",
        "blur": "",
        "spread": "",
        "color": ""
      },
      "font": {
        "color": "#f69513",
        "decoration": "",
        "family": "",
        "style": "",
        "weight": "",
        "size": "18",
        "align": "center"
      },
      "hover": {
        "background": {
          "color": "#fde9cf"
        },
        "margin": {
          "top": "",
          "right": "",
          "bottom": "",
          "left": ""
        },
        "padding": {
          "top": "",
          "right": "",
          "bottom": "",
          "left": ""
        },
        "border": {
          "color": "#f8b459",
          "width": "2",
          "style": "solid",
          "radius": ""
        },
        "boxShadow": {
          "horizontalOffset": "",
          "verticalOffset": "",
          "blur": "",
          "spread": "",
          "color": ""
        },
        "font": {
          "color": "#f8b459",
          "decoration": "",
          "family": "",
          "style": "",
          "weight": "",
          "size": "",
          "align": ""
        }
      },
      "selected": {
        "background": {
          "color": "#f69513"
        },
        "margin": {
          "top": "",
          "right": "",
          "bottom": "",
          "left": ""
        },
        "padding": {
          "top": "",
          "right": "",
          "bottom": "",
          "left": ""
        },
        "border": {
          "color": "",
          "width": "",
          "style": "",
          "radius": ""
        },
        "boxShadow": {
          "horizontalOffset": "",
          "verticalOffset": "",
          "blur": "",
          "spread": "",
          "color": ""
        },
        "font": {
          "color": "#ffffff",
          "decoration": "",
          "family": "",
          "style": "",
          "weight": "",
          "size": "",
          "align": ""
        }
      }
    }
  }
}