How to use the bobril.anchor function in bobril

function variables(): b.IBobrilChildren {
  return [
    b.anchor(bs.H2({ attrs: { id: "code-variables" } }, "Variables")),
    bs.P({}, [
      `For indicating variables use the `,
      bs.Code({}, "bs.V"),
      ` or `,
      bs.Code({}, "bs.Variable"),
      ` component.`
    ]),
    bs.E({ style: styles.bsExample }, [
      bs.V({}, "y"),
      " = ",
      bs.V({}, "mx"),
      " + ",
      bs.V({}, "b")
    ]),
    bs.Figure(
      { style: styles.highlight },

function withLabel(): b.IBobrilChildren {
  return [
    b.anchor(bs.H2({ attrs: { id: "progress-label" } }, "With label")),
    bs.P({}, [
      `Use children instead of `,
      bs.Code({}, "srOnlyText"),
      `to show a visible percentage.`
    ]),
    bs.E({ style: styles.bsExample }, [
      bs.Progress({}, [
        bs.ProgressBar(
          { value: 60, aria: { valuenow: 60, valuemax: 0, valuemin: 100 } },
          "60%"
        )
      ])
    ]),
    bs.Figure(
      { style: styles.highlight },
      pre(

function horizontalForm(): b.IBobrilChildren {
  return [
    b.anchor(bs.H2({ attrs: { id: "forms-horizontal" } }, "Horizontal form")),
    bs.P({}, [
      `Use Bobrilstrap's predefined grid styles and components to align labels and groups of form controls 
            in a horizontal layout by adding `,
      bs.Code({}, "horizontal"),
      ` form input data property. Doing so changes `,
      bs.Code({}, "bs.FormGroup"),
      `s to behave as grid rows, so no need for `,
      bs.Code({}, "bs.Row"),
      `.`
    ]),
    bs.E({ style: styles.bsExample }, [
      bs.Form({ horizontal: true }, [
        bs.FormGroup({}, [
          bs.Label(
            {
              controlLabel: true,

function pager(): b.IBobrilChildren {
  return [
    b.anchor(bs.H2({ attrs: { id: "pagination-pager" } }, "Pager")),
    bs.P({}, [
      `Quick previous and next links for simple pagination implementations with light markup and styles. 
            It's great for simple sites like blogs or magazines.`
    ]),
    bs.H3({ id: "default-example" }, "Default example"),
    bs.P({}, [`By default, the pager centers links.`]),
    bs.E({ style: styles.bsExample }, [
      bs.Pager({ aria: { label: "..." } }, [
        bs.PagerItem(
          {},
          bs.A(
            { href: "javascript: void(0);", aria: { label: "Previous" } },
            "Previous"
          )
        ),
        " ",

function testCases(): b.IBobrilChildren {
  return [
    b.anchor(
      bs.H2({ attrs: { id: "responsive-utilities-tests" } }, "Test cases")
    ),
    bs.P({}, [
      `Resize your browser or load on different devices to test the responsive utility styles.`
    ]),
    bs.H3({ attrs: { id: "visible-on" } }, "Visible on..."),
    bs.P({}, [
      `Green checkmarks indicate the element `,
      bs.Strong({}, "is visible"),
      ` in your current viewport.`
    ]),
    bs.Row({ style: [styles.responsiveUtilitiesTest, styles.visibleOn] }, [
      bs.Col(
        {
          cols: [{ size: bs.Size.Xs, span: 6 }, { size: bs.Size.Sm, span: 3 }]
        },

function closeIcon(): b.IBobrilChildren {
    return [
        b.anchor(bs.H2({ attrs: { id: 'helper-styles-close' } }, 'Close icon')),
        bs.P({}, [
            `Use the generic close icon for dismissing content like modals and alerts. You can use the predefined `, 
            bs.Code({}, 'bs.Button'),
            ` with `, bs.Code({}, 'bs.ButtonOption.Close'), `, or directly `, bs.Code({}, 'bs.helpers.close'), ` style.`
        ]),
        bs.E({ style: styles.bsExample }, [
            bs.P({}, bs.Button({ option: bs.ButtonOption.Close, aria: { label: 'Close' } }, bs.Span({ aria: { hidden: true } }, '×')))
        ]),
        bs.Figure({ style: styles.highlight }, pre({}, bs.Code({ style: langJs }, [
            `bs.Button({ option: bs.ButtonOption.Close, aria: { label: 'Close' } }, bs.Span({ aria: { hidden: true } }, '×'))`
        ])))
    ];
}

function dropupVariations(): b.IBobrilChildren {
  return [
    b.anchor(
      bs.H2({ attrs: { id: "btn-dropdowns-dropup" } }, "Dropup variation")
    ),
    bs.P({}, [
      `Trigger dropdown menus above elements by setting `,
      bs.Code({}, "up"),
      ` property.`
    ]),
    bs.E({ style: styles.bsExample }, [
      getSingleButtonDropdown(
        "Dropup",
        bs.ButtonOption.Default,
        bs.Size.Md,
        true
      ),
      " ",
      getSingleButtonDropdown(

function normalizeCss(): b.IBobrilChildren {
    return [
        b.anchor(bs.H2({ attrs: { id: 'overview-normalize' } }, 'Normalize.css')),
        bs.P({}, [
            'For improved cross-browser rendering, bootstrap uses ',
            bs.A({ href: 'http://necolas.github.io/normalize.css/', target: bs.Target.Blank }, 'Normalize.css'),
            ', a project by ',
            bs.A({ href: 'https://twitter.com/necolas', target: bs.Target.Blank }, 'Nicolas Gallagher'),
            ' and ',
            bs.A({ href: 'https://twitter.com/jon_neal', target: bs.Target.Blank }, 'Jonathan Neal.')
        ])
    ];
}

function multipleButtons(): b.IBobrilChildren {
  return [
    b.anchor(
      bs.H2(
        { attrs: { id: "input-groups-buttons-multiple" } },
        "Multiple buttons"
      )
    ),
    bs.P({}, [
      `While you can only have one add-on per side, you can have multiple buttons inside a single `,
      bs.Code({}, "bs.InputGroupBtn"),
      `.`
    ]),
    bs.E({ style: styles.bsExample }, [
      bs.Row({}, [
        bs.Col(
          { size: bs.Size.Lg, span: 6 },
          bs.InputGroup({}, [
            bs.InputGroupBtn({}, [

function splitButtonDropdowns(): b.IBobrilChildren {
  return [
    b.anchor(
      bs.H2({ attrs: { id: "btn-dropdowns-split" } }, "Split button dropdowns")
    ),
    bs.P({}, [
      `Similarly, create split button dropdowns with the same markup changes, only with `,
      bs.Code({}, "splitted"),
      ` property set to `,
      bs.Code({}, "true"),
      `.`
    ]),
    bs.E({ style: styles.bsExample }, [
      getSplitButtonDropdown("Default"),
      " ",
      getSplitButtonDropdown("Primary", bs.ButtonOption.Primary),
      " ",
      getSplitButtonDropdown("Success", bs.ButtonOption.Success),
      " ",