import { h } from "@stencil/core";
import scenario from "./sqm-titled-section.feature";
export default {
  title: "Components/Titled Section",
  parameters: {
    scenario,
  },
};
export const AlignLeft = () => {
  return (h("sqm-titled-section", { "text-align": "left" },
    h("sqm-text", { slot: "label" },
      h("h3", null, "Earn more rewards"),
      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
};
export const AlignCenter = () => {
  return (h("sqm-titled-section", { "text-align": "center" },
    h("sqm-text", { slot: "label" },
      h("h3", null, "Earn more rewards"),
      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
};
export const AlignRight = () => {
  return (h("sqm-titled-section", { "text-align": "right" },
    h("sqm-text", { slot: "label" },
      h("h3", null, "Earn more rewards"),
      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
};
export const Padding = () => {
  return (h("div", null,
    h("h3", null, "None"),
    h("sqm-titled-section", { padding: "none" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xxx-small"),
    h("sqm-titled-section", { padding: "xxx-small" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xx-small"),
    h("sqm-titled-section", { padding: "xx-small" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "x-small"),
    h("sqm-titled-section", { padding: "x-small" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "small"),
    h("sqm-titled-section", { padding: "small" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "medium"),
    h("sqm-titled-section", { padding: "medium" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "large"),
    h("sqm-titled-section", { padding: "large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "x-large"),
    h("sqm-titled-section", { padding: "x-large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xx-large"),
    h("sqm-titled-section", { padding: "xx-large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xxx-large"),
    h("sqm-titled-section", { padding: "xxx-large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xxxx-large"),
    h("sqm-titled-section", { padding: "xxxx-large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
};
export const LabelMargin = () => {
  return (h("div", null,
    h("h3", null, "None"),
    h("sqm-titled-section", { "label-margin": "none" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xxx-small"),
    h("sqm-titled-section", { "label-margin": "xxx-small" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xx-small"),
    h("sqm-titled-section", { "label-margin": "xx-small" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "x-small"),
    h("sqm-titled-section", { "label-margin": "x-small" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "small"),
    h("sqm-titled-section", { "label-margin": "small" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "medium"),
    h("sqm-titled-section", { "label-margin": "medium" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "large"),
    h("sqm-titled-section", { "label-margin": "large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "x-large"),
    h("sqm-titled-section", { "label-margin": "x-large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xx-large"),
    h("sqm-titled-section", { "label-margin": "xx-large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xxx-large"),
    h("sqm-titled-section", { "label-margin": "xxx-large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
    h("br", null),
    h("hr", null),
    h("br", null),
    h("h3", null, "xxxx-large"),
    h("sqm-titled-section", { "label-margin": "xxxx-large" },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards")),
      h("sqm-text", { slot: "content" },
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
};
