Franklin Street - Snippets - Organisms - Components

Non-Indexed

Textarea

Input

Indexed

For use inside of a Knockout.js foreach loop. The data-bind attributes with $index() will be added in code automatically.

Textarea

Input

Snippet CSS classes:

snippet--dropdown
snippet--button
snippet--list
snippet--search
snippet--loader
snippet--empty
snippets
snippet--add
snippet--title
snippet--preview

Non-indexed Textarea

<div class="snippets">
    <div class="toolbar toolbar--all margin-top--sibling--smallest">
        <div class="toolbar--column">
            @Html.LabelAtom(
                     id: "example-textarea-label",
                     labelfor: "example-textarea",
                     text: "Example Textarea"
                 )
        </div>
        <div class="toolbar--column toolbar--right">
            @Html.SnippetOrganism(
                     snippetId: "example",
                     snippetCategoryId: 1,
                     snippetTargetId: "example-textarea"
                 )
        </div>
    </div>
    @Html.TextareaAtom(
             TextareaTypeEnum.Base,
             id: "example-textarea",
             customClass: "textarea--resize"
         )
</div>

Non-indexed Input

<div class="snippets">
    <div class="toolbar toolbar--all margin-top--sibling--smallest">
        <div class="toolbar--column">
            @Html.LabelAtom(
                     id: "example-input-label",
                     labelfor: "example-input-text",
                     text: "Example Input"
                 )
        </div>
        <div class="toolbar--column toolbar--right">
            @Html.SnippetOrganism(
                     snippetId: "example-input",
                     snippetCategoryId: 1,
                     snippetTargetId: "example-input-text"
                 )
        </div>
    </div>
    @Html.InputAtom(
             InputTypeEnum.Base,
             id: "example-input-text"
         )
</div>

Indexed Textarea

<div class="snippets">
    <div class="toolbar toolbar--all margin-top--sibling--smallest">
        <div class="toolbar--column">
            @Html.LabelAtom(
                     id: "example-indexed-textarea-label",
                     labelfor: "example-indexed-textarea",
                     text: "Example Indexed Textarea"
                 )
        </div>
        <div class="toolbar--column toolbar--right">
            @Html.SnippetOrganism(
                     snippetId: "example-indexed",
                     snippetCategoryId: 1,
                     snippetTargetId: "example-indexed-textarea",
                     indexed: true
                 )
        </div>
    </div>
    @Html.TextareaAtom(
             TextareaTypeEnum.Base,
             id: "example-indexed-textarea",
             customClass: "textarea--resize"
         )
</div>

Indexed Input

<div class="snippets">
    <div class="toolbar toolbar--all margin-top--sibling--smallest">
        <div class="toolbar--column">
            @Html.LabelAtom(
                     id: "example-indexed-input-label",
                     labelfor: "example-indexed-input-text",
                     text: "Example Indexed Input"
                 )
        </div>
        <div class="toolbar--column toolbar--right">
            @Html.SnippetOrganism(
                     snippetId: "example-indexed-input",
                     snippetCategoryId: 1,
                     snippetTargetId: "example-indexed-input-text",
                     indexed: true
                 )
        </div>
    </div>
    @Html.InputAtom(
             InputTypeEnum.Base,
             id: "example-indexed-input-text"
         )
</div>