Components documentation

This page contains an overview + examples on all available components on the current solution. The code for the components are found in /Templates/Designs/Rapido/Components.

Helper method: RenderButton

Settings

ConfirmText	System.String
ConfirmTitle	System.String
ButtonType
Link	System.String
Target
IconPosition
Id	System.String
Title	System.String
AltText	System.String
OnClick	System.String
CssClass	System.String
Disabled	System.Boolean
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Name	System.String
Href	System.String
ButtonLayout
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Button { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Button { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderCheckboxField

Check this

There is an error

Settings

Checked	System.Boolean
Type
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new CheckboxField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new CheckboxField { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderCheckboxListField

Select multiple options

One

Two

Three

There is an error

Settings

Options	Component { Capacity Count Item }
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new CheckboxListField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new CheckboxListField { OPTIONAL_settings })

Implementation example

Markup result

<div class="form__field-group u-margin-bottom dw-mod" >
            <div class="u-full-width"> 
 <label for="MyCheckboxes" class="u-pull--left">Select multiple options</label>                                     <div class="u-pull--right">

</div>
            </div>

</div>
    <div class="form__field-group dw-mod">
        <input id="CheckTwo" type="checkbox" checked="true" class="form__control form__control  dw-mod" />
            <label for="CheckTwo" class="dw-mod">Two</label>

</div>
    <div class="form__field-group dw-mod">
        <input id="CheckThree" disabled="true" type="checkbox" class="form__control form__control  dw-mod" />
            <label for="CheckThree" class="dw-mod">Three</label>

</div>

<div class="notification-message-error notification-message-clean clean  u-full-width  dw-mod" >
There is an error        </div>

</div>
        
    </div>

Helper method: RenderContentModule

Add the module as a text string

Settings

Content	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ContentModule { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ContentModule { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderDashboard

Settings

WidgetsBaseBackgroundColor	System.String
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Dashboard { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Dashboard { OPTIONAL_settings })

Implementation example

Markup result

<div class="dashboard dw-mod" >
            <div class="dashboard__widget">
                        <a href="#" class="widget widget--link dw-mod" style="background-color:rgb(2.16836734693878, 56.3775510204082, 85)" title="Example" >
            <div class="u-center-middle u-color-light">
                <i class="fas fa-code widget__iconwidget__icon" ></i>
                <div class="widget__title">Example</div>
            </div>
        </a>

</div>
            <div class="dashboard__widget">
                        <a href="#" class="widget widget--link dw-mod" style="background-color:rgb(4.33673469387755, 112.755102040816, 170)" title="Widget" >
            <div class="u-center-middle u-color-light">
                <i class="fas fa-bell widget__iconwidget__icon" ></i>
                <div class="widget__title">Widget</div>
            </div>
        </a>

</div>
            <div class="dashboard__widget">
                        <a href="#" class="widget widget--link dw-mod" style="background-color:rgb(6.50510204081633, 169.132653061224, 255)" title="Sample" >
            <div class="u-center-middle u-color-light">
                <i class="fas fa-bomb widget__iconwidget__icon" ></i>
                <div class="widget__title">Sample</div>
            </div>
        </a>

</div>
    </div>

Helper method: RenderDashboard

Settings

WidgetsBaseBackgroundColor	System.String
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Dashboard { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Dashboard { OPTIONAL_settings })

Implementation example

Markup result

<div class="dashboard dw-mod" >
            <div class="dashboard__widget">
                    <div class="widget dw-mod" style='background-color:rgb(18.0084745762712, 63.75, 18.0084745762712)' >
        <div class="u-center-middle u-color-light">
                <i class="fas fa-code widget__iconwidget__icon" ></i>
            <div class="widget__counter">120</div>
            <div class="widget__title">Orders</div>
        </div>
    </div>

</div>
            <div class="dashboard__widget">
                    <div class="widget dw-mod" style='background-color:rgb(36.0169491525424, 127.5, 36.0169491525424)' >
        <div class="u-center-middle u-color-light">
            <div class="widget__counter">1105</div>
            <div class="widget__title">Count</div>
        </div>
    </div>

</div>
            <div class="dashboard__widget">
                    <div class="widget dw-mod" style='background-color:rgb(54.0254237288136, 191.25, 54.0254237288136)' >
        <div class="u-center-middle u-color-light">
                <i class="fas fa-quote-right widget__iconwidget__icon" ></i>
            <div class="widget__counter">5</div>
            <div class="widget__title">Quotes</div>
        </div>
    </div>

</div>
            <div class="dashboard__widget">
                    <div class="widget dw-mod" style='background-color:rgb(72.0338983050847, 255, 72.0338983050847)' >
        <div class="u-center-middle u-color-light">
                <i class="fas fa-calendar widget__iconwidget__icon" ></i>
            <div class="widget__counter">15</div>
            <div class="widget__title">Days</div>
        </div>
    </div>

</div>
    </div>

Helper method: RenderDashboardWidgetCounter

Settings

Count	System.Int32
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Title	System.String
BackgroundColor	System.String
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new DashboardWidgetCounter { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new DashboardWidgetCounter { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderDashboardWidgetLink

Settings

Link	System.String
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Title	System.String
BackgroundColor	System.String
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new DashboardWidgetLink { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new DashboardWidgetLink { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderFileField

Choose file No files chosen

Settings

ChooseFileText	System.String
NoFilesChosenText	System.String
UploadButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Multiple	System.Boolean
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new FileField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new FileField { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderForm

Settings

Name	System.String
Method
Action	System.String
Enctype
OnSubmit	System.String
CssClass	System.String
FormStartMarkup	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Form { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Form { OPTIONAL_settings })

Markup result

<form class=" u-no-margin dw-mod" method="Get" >
    <div class="form__field-group dw-mod">
        <input id="166ced85fc684ec6b7e42e148ee03ec5" type="checkbox" checked="true" class="form__control form__control  dw-mod" />
            <label for="166ced85fc684ec6b7e42e148ee03ec5" class="dw-mod">My label</label>

</div>
    <div class="form__field-group u-full-width  dw-mod">
            <div class="u-full-width"> 
 <label for="19649d57fe814c6e948ebfdcc0a44a55" class="u-pull--left">My text <span class="required dw-mod">*</span> <span class="required dw-mod">*</span></label>                             </div>

</div>
    <div class="form__field-group u-full-width dw-mod">
            <div class="u-full-width"> 
 <label for="414c830c43b74948aefe585373ea587f" class="u-pull--left">My number</label>                             </div>

</div>
    <div class="form__field-group u-full-width dw-mod">
            <div class="u-full-width"> 
 <label for="c05e2ff025474d9fb717aad563bd4bab" class="u-pull--left">My number</label>                             </div>

</div>
        </form>

Helper method: RenderHeading

My new heading

Settings

Title	System.String
Level	System.Int32
Color	System.String
Link	System.String
CssClass	System.String
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
IconPosition
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Heading { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Heading { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderHiddenField

Settings

Value	System.String
Id	System.String
Name	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
Label	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new HiddenField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new HiddenField { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderIcon

Icon label

Settings

Prefix	System.String
Name	System.String
Color	System.String
CssClass	System.String
LabelPosition
Label	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Icon { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Icon { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderImage

Image caption

Settings

Path
Title	System.String
Id	System.String
Link	System.String
OnClick	System.String
Caption	System.String
CssClass	System.String
Style
ImageDefault	Component { Width Height Crop DoNotUpscale FillCanvas Compression Quality Format BackgroundColor }
ImageSmall	Component { Width Height Crop DoNotUpscale FillCanvas Compression Quality Format BackgroundColor }
ImageMedium	Component { Width Height Crop DoNotUpscale FillCanvas Compression Quality Format BackgroundColor }
DisableImageEngine	System.Boolean
DisableLazyLoad	System.Boolean
FilterPrimary
FilterSecondary
FilterColor	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Image { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Image { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderLink

Settings

Target
Rel
Download	System.Boolean
Id	System.String
Title	System.String
AltText	System.String
OnClick	System.String
CssClass	System.String
Disabled	System.Boolean
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Name	System.String
Href	System.String
ButtonLayout
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Link { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Link { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderModal

Settings

Id	System.String
Heading	Component { Title Level Color Link CssClass Icon IconPosition HelperName }
Width
Height
BodyText	System.String
OnClose	System.String
BodyTemplate
DisableDarkOverlay	System.Boolean
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Modal { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Modal { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderNotificationMessage

There is an error

Settings

Id	System.String
Message	System.String
MessageType
MessageLayout
CssClass	System.String
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new NotificationMessage { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new NotificationMessage { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderNumberField

My number

Settings

Min	System.Nullable`1[System.Int32]
Max	System.Nullable`1[System.Int32]
Step	System.Int32
ReadOnly	System.Boolean
OnKeyUp	System.String
OnInput	System.String
OnFocus	System.String
ActionButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new NumberField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new NumberField { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderRating

Settings

Score	System.Int32
OutOf	System.Int32
Type
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Rating { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Rating { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderSelectField

Select field

There is an error

Settings

Default	Component { Id Checked Disabled Value Label ExtraAttributes Type Name OnChange OnClick ErrorMessage HelperName }
Options	Component { Capacity Count Item }
ActionButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new SelectField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new SelectField { OPTIONAL_settings })

Implementation example

Markup result

<div class="form__field-group u-full-width dw-mod">
            <div class="u-full-width"> 
 <label for="MySelectField" class="u-pull--left">Select field</label>                                     <div class="u-pull--right">

</div>
            </div>

<option value="one" >One</option>
    <option value="two" >Two</option>
    <option disabled="true" value="three" >Three</option>
    </select>

</div>

<div class="notification-message-error notification-message-clean clean  u-full-width  dw-mod" >
There is an error        </div>

</div>

Helper method: RenderSticker

On sale

Settings

Title	System.String
Color	System.String
BackgroundColor	System.String
Style
Size
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Sticker { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Sticker { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderStickersCollection

On sale

New

Black friday

Settings

Stickers	Component { Capacity Count Item }
CssClass	System.String
Position
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new StickersCollection { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new StickersCollection { OPTIONAL_settings })

Markup result

Helper method: RenderTable

Color	Blue
Size	M

Settings

Id	System.String
CssClass	System.String
Design
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Table { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Table { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderTable

string1	string2	CustomCell2
Meat	Proteins (g)	Fats (g)	Carbs (g)
Chicken	20,8	8,8	0,6
Pork	19,4	7,1	0
Beef	18,9	12,4	0
CustomCell		CustomCell2
1	2	3	4

Settings

Id	System.String
CssClass	System.String
Design
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Table { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Table { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderText

My text

Settings

Content	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Text { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new Text { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderTextareaField

Kommentar

There is an error

Settings

Placeholder	System.String
MaxLength	System.Int32
Rows	System.Int32
ReadOnly	System.Boolean
OnKeyUp	System.String
OnInput	System.String
OnFocus	System.String
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Code preview is not available for this component

Helper method: RenderTextField

Text field

There is an error

Settings

Type
Placeholder	System.String
MaxLength	System.Int32
ReadOnly	System.Boolean
OnKeyUp	System.String
OnInput	System.String
OnFocus	System.String
ActionButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new TextField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new TextField { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderAddToCart

Settings

WrapperCssClass	System.String
Disabled	System.Boolean
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new AddToCart { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new AddToCart { OPTIONAL_settings })

Implementation example

Markup result

<div class="buttons-collection" >  
    <input type="checkbox" id="9469a9fab5fb428ca6cf324feede9526" class="dropdown-trigger" />
    <div class="dropdown unit-selector  dw-mod" >
        <label class="dropdown__header dropdown__btn dropdown__btn--unit-selector dw-mod" for="9469a9fab5fb428ca6cf324feede9526">Select unit</label>
        <div class="dropdown__content dw-mod">
            <div class='dropdown__item dw-mod' onclick='selectTestUnit(this)' data-value=''>Select unit</div><div class='dropdown__item dw-mod' onclick='selectTestUnit(this)' data-value='VO53'>Piece</div><div class='dropdown__item dw-mod' onclick='selectTestUnit(this)' data-value='VO44'>Pkg. of 8</div>
        </div>
        <label class="dropdown-trigger-off" for="9469a9fab5fb428ca6cf324feede9526"></label>
    </div>
            <input id="4e173fd7e83d4fe89f9c7c2bf05088de" name="4e173fd7e83d4fe89f9c7c2bf05088de" min="1" value="1" type="number" class=" dw-mod" />
                <button class=" btn--condensed btn--condensed btn btn--primary dw-mod" title="Legg i handlevogn" onClick="Cart.AddToCart(event, { id: 'PROD102',unitId: '' + window.selectedTestUnit + '',productInfo: {name: 'Test product'},quantity: parseFloat(document.getElementById('4e173fd7e83d4fe89f9c7c2bf05088de').value)});Cart.AddToCart(event, { id: 'PROD102',unitId: '' + window.selectedTestUnit + '',productInfo: {name: 'Test product'},quantity: parseFloat(document.getElementById('4e173fd7e83d4fe89f9c7c2bf05088de').value)});" type="button" >                    <div class="u-flex u-flex--align-items-center  u-flex--align-center u-flex--align-center"><i class="fas fa-shopping-cart u-margin-right--lg u-w20px" ></i>Legg i handlevogn</div>
</button>

</div>

Helper method: RenderAddToCartButton

Settings

HideTitle	System.Boolean
ProductId	System.String
VariantId	System.String
UnitId	System.String
BuyForPoints	System.Boolean
ProductInfo	System.String
QuantitySelectorId	System.String
ConfirmText	System.String
ConfirmTitle	System.String
ButtonType
Link	System.String
Target
IconPosition
Id	System.String
Title	System.String
AltText	System.String
OnClick	System.String
CssClass	System.String
Disabled	System.Boolean
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Name	System.String
Href	System.String
ButtonLayout
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new AddToCartButton { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new AddToCartButton { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderQuantitySelector

Settings

Min
Max
Step
Min	System.Nullable`1[System.Int32]
Max	System.Nullable`1[System.Int32]
Step	System.Int32
ReadOnly	System.Boolean
OnKeyUp	System.String
OnInput	System.String
OnFocus	System.String
ActionButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new QuantitySelector { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new QuantitySelector { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderUnitSelector

Settings

Id	System.String
OptionsContent	System.String
SelectedOption	System.String
Disabled	System.Boolean
CssClass	System.String
Options	Component { Capacity Count Item }
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new UnitSelector { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new UnitSelector { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderVariantMatrix

Blue
Red
	0

Settings

ProductId	System.String
Description	System.String
EnableCounters	System.Boolean
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new VariantMatrix { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new VariantMatrix { OPTIONAL_settings })

Markup result

</td>
                        </tr>
                        <tr>
                            <td class="u-bold">
                                Red
                            </td>
                            <td>
                                        <div class="use-btn-height" style="background-color: #a8a8a8"></div>

</td>
                        </tr>

<tr>
                        <td> </td>
                        <td>
                            <div class="qty-field js-total-qty-column-0 dw-mod">0</div>
                        </td>
                    </tr>
                </tbody>
                                </table>
        <script>
            document.addEventListener("DOMContentLoaded", function (event) {
                MatrixUpdateQuantity("PRODTEST");
            });

MatrixUpdateQuantity = function (productId) {
                var currentMatrix = document.getElementById("VariantMatrixTable_" + productId);
                var allQtyFields = currentMatrix.getElementsByClassName("js-qty");

var qtyRowArr = [];
                var qtyColumnArr = [];

var totalQty = 0;

for (var i = 0; i < allQtyFields.length; i++) {
                    qtyRowArr[allQtyFields[i].getAttribute("data-qty-row-group")] = 0;
                    qtyColumnArr[allQtyFields[i].getAttribute("data-qty-column-group")] = 0;
                }

for (var i = 0; i < allQtyFields.length; i++) {
                    qtyRowArr[allQtyFields[i].getAttribute("data-qty-row-group")] += parseFloat(allQtyFields[i].value);
                    qtyColumnArr[allQtyFields[i].getAttribute("data-qty-column-group")] += parseFloat(allQtyFields[i].value);
                    totalQty += parseFloat(allQtyFields[i].value);
                }

//Update row counters
                for (var i = 0; i < qtyRowArr.length; i++) {
                    var qtyCounter = currentMatrix.getElementsByClassName("js-total-qty-row-" + i)[0];

if (qtyRowArr[i] != undefined && qtyCounter != null) {
                        var currentCount = qtyCounter.innerHTML;
                        qtyCounter.innerHTML = qtyRowArr[i];

if (currentCount != qtyCounter.innerHTML) {
                            qtyCounter.classList.add("qty-field--active");
                        }
                    }
        
                }

//Update column counters
                for (var i = 0; i < qtyColumnArr.length; i++) {
                    var qtyCounter = currentMatrix.getElementsByClassName("js-total-qty-column-" + i)[0];

if (qtyColumnArr[i] != undefined && qtyCounter != null) {
                        var currentCount = qtyCounter.innerHTML;
                        qtyCounter.innerHTML = qtyColumnArr[i];

if (currentCount != qtyCounter.innerHTML) {
                            qtyCounter.classList.add("qty-field--active");
                        }
                    }
                }

if (document.getElementById("TotalQtyCount_" + productId)) {
                    document.getElementById("TotalQtyCount_" + productId).innerHTML = totalQty;
                }

//Clean up animations
                setTimeout(function () {
                    for (var i = 0; i < qtyRowArr.length; i++) {
                        var qtyCounter = currentMatrix.getElementsByClassName("js-total-qty-row-" + i)[0];
                        if (qtyCounter != null) {
                            qtyCounter.classList.remove("qty-field--active");
                        }
                    }
                    for (var i = 0; i < qtyColumnArr.length; i++) {
                        var qtyCounter = currentMatrix.getElementsByClassName("js-total-qty-column-" + i)[0];
                        if (qtyCounter != null) {
                            qtyCounter.classList.remove("qty-field--active");
                        }
                    }
                }, 1000);
            }
        </script>

Helper method: RenderArticleAuthorAndDate

Skrevet av Me den 27-03-1984

Settings

Author	System.String
Date	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleAuthorAndDate { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleAuthorAndDate { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleBanner

A perfect banner

Settings

UseFilters	System.Boolean
Layout
Image	Component { Path Title Id Link OnClick Caption CssClass Style ImageDefault ImageSmall ImageMedium DisableImageEngine DisableLazyLoad FilterPrimary FilterSecondary FilterColor ExtraAttributes HelperName }
Heading	System.String
Subheading	System.String
Author	System.String
Date	System.String
Category	System.String
CategoryColor	System.String
Link	System.String
LinkText	System.String
TextLayout
TextColor	System.String
ButtonLayout
RatingScore	System.Int32
RatingOutOf	System.Int32
ExternalParagraphId	System.Int32
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleBanner { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleBanner { OPTIONAL_settings })

Implementation example

Markup result

</div>
                </div>
                <div class="center-container dw-mod">
                    <div class="grid">
                        <div class="grid__col-md-8 grid__col-xs-12 paragraph-container paragraph-container--height-lg">
                            <div class="u-left-middle">
                                <div>
                                        <h1 class="article__header article__header--giant dw-mod" style="color:">A perfect banner</h1>
                                                                                                                                            </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </section>

Helper method: RenderArticleBodyRow

Settings

TopLayout	System.String
TextLayout	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleBodyRow { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleBodyRow { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleHeader

Guides

Me 01-01-2020

Header clean layout

This is new

Settings

Layout
Image	Component { Path Title Id Link OnClick Caption CssClass Style ImageDefault ImageSmall ImageMedium DisableImageEngine DisableLazyLoad FilterPrimary FilterSecondary FilterColor ExtraAttributes HelperName }
Heading	System.String
Subheading	System.String
Author	System.String
Date	System.String
Category	System.String
CategoryColor	System.String
Link	System.String
LinkText	System.String
TextLayout
TextColor	System.String
ButtonLayout
RatingScore	System.Int32
RatingOutOf	System.Int32
ExternalParagraphId	System.Int32
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleHeader { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleHeader { OPTIONAL_settings })

Implementation example

Markup result

<div class="grid grid--align-content-start grid--justify-start">
            <div class="grid__col-md-8 grid__col-sm-12 u-padding--lg dw-mod">
                    <div class="u-border-bottom u-padding-bottom">
                            <div class="u-pull--left">
                                <div class="article__category dw-mod" style="color: #c21212">Guides</div>
                            </div>
                        <div class="u-pull--right">
                                <small class="article__post-info dw-mod">Me 01-01-2020</small>
                                                    </div>
                    </div>

<div class="grid__cell">
                        <h1 class="article__header article__header--giant dw-mod">Header clean layout</h1>
                                                <div class="u-padding-bottom--lg">
                                                <img class="b-lazy  dw-mod" src="/Files/Images/placeholder.gif" data-src="/Admin/Public/GetImage.ashx?Width=1000&Height=600&Crop=1&Compression=75&DoNotUpscale=True&FillCanvas=False&Image=%2fFiles%2fImages%2fDemo%2f8026157750_b98560948c_b.jpg&&AlternativeImage=%2fFiles%2fImages%2fmissing_image.jpg"     />

</div>
                                            <div class="article__leadtext dw-mod">This is new</div>
                                            <div class="grid__cell">
                                    <a class="btn btn--primary dw-mod" title="Read more" href="#" >Read more</a>

</div>
                </div>
            </div>
        </div>

Helper method: RenderArticleImage

This is the caption for the image

Settings

Image	Component { Path Title Id Link OnClick Caption CssClass Style ImageDefault ImageSmall ImageMedium DisableImageEngine DisableLazyLoad FilterPrimary FilterSecondary FilterColor ExtraAttributes HelperName }
EnableFullImage	System.Boolean
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleImage { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleImage { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleLink

Settings

ConfirmText	System.String
ConfirmTitle	System.String
ButtonType
Link	System.String
Target
IconPosition
Id	System.String
Title	System.String
AltText	System.String
OnClick	System.String
CssClass	System.String
Disabled	System.Boolean
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Name	System.String
Href	System.String
ButtonLayout
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleLink { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleLink { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleListFilter

Settings

Options
Label	System.String
SystemName	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleListFilter { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleListFilter { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleListSearch

Settings

Title	System.String
SearchParameter	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleListSearch { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleListSearch { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleMenu

Settings

Title	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleMenu { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleMenu { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleMenuItem

Settings

Title	System.String
Link	System.String
Href	System.String
OnClick	System.String
Icon	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleMenuItem { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleMenuItem { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleQuote

I would like to quote that this is so.

- The user

Settings

Image	Component { Path Title Id Link OnClick Caption CssClass Style ImageDefault ImageSmall ImageMedium DisableImageEngine DisableLazyLoad FilterPrimary FilterSecondary FilterColor ExtraAttributes HelperName }
Text	System.String
Author	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleQuote { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleQuote { OPTIONAL_settings })

Implementation example

Markup result

</div>
                </div>
        <div class="grid__col-auto">
            <div class="article__quote dw-mod">
                <i class="fas fa-quote-right u-margin-bottom--lg"></i>
                I would like to quote that this is so.
                <i class="fas fa-quote-right"></i>
            </div>
                        <div class="article__quote-author dw-mod">
                - The user
            </div>
        </div>
    </div>

Helper method: RenderArticleSubHeader

My sub header

Settings

Title	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleSubHeader { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleSubHeader { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleSummary

This is a summary

Settings

Text	System.String
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleSummary { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleSummary { OPTIONAL_settings })

Implementation example

Markup result

Helper method: RenderArticleText

Normal body text...

Settings

Text	System.String
EnableLargeText	System.Boolean
HelperName	System.String

Basic usage

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleText { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

@Render(new ArticleText { OPTIONAL_settings })

Implementation example

Markup result

General components

Ecommerce components

Article components

Components documentation

Helper method: RenderButton

Helper method: RenderCheckboxField

Helper method: RenderCheckboxListField

Helper method: RenderContentModule

Helper method: RenderDashboard

Helper method: RenderDashboard

Helper method: RenderDashboardWidgetCounter

Helper method: RenderDashboardWidgetLink

Helper method: RenderFileField

Helper method: RenderForm

Helper method: RenderHeading

My new heading

Helper method: RenderHiddenField

Helper method: RenderIcon

Helper method: RenderImage

Helper method: RenderLink

Helper method: RenderModal

My text

Helper method: RenderNotificationMessage

Helper method: RenderNumberField

Helper method: RenderRating

Helper method: RenderSelectField

Helper method: RenderSticker

Helper method: RenderStickersCollection

Helper method: RenderTable

Helper method: RenderTable

Helper method: RenderText

Helper method: RenderTextareaField

Helper method: RenderTextField

Helper method: RenderAddToCart

Helper method: RenderAddToCartButton

Helper method: RenderQuantitySelector

Helper method: RenderUnitSelector

Helper method: RenderVariantMatrix

Helper method: RenderArticleAuthorAndDate

Helper method: RenderArticleBanner

A perfect banner

Helper method: RenderArticleBodyRow

Helper method: RenderArticleHeader

Header clean layout

Helper method: RenderArticleImage

Helper method: RenderArticleLink

Helper method: RenderArticleListFilter

Helper method: RenderArticleListSearch

Helper method: RenderArticleMenu

Helper method: RenderArticleMenuItem

Helper method: RenderArticleQuote

Helper method: RenderArticleSubHeader

My sub header

Helper method: RenderArticleSummary

Helper method: RenderArticleText