Dynamic Components Demo

Find out if you’re getting ripped off on your car insurance in less than two minutes.
No long forms · No spam · No fees
  • What’s a Section
  • Default value for asSection
  • Properties in asSection
  • Colors in backgroundColor
  • Different Scenarios


Big Notice: we don’t recommend using dynamic components inside articles. This article is just for demo usage.
Click here to see the dynamic components part directly

What’s a Section

Section is a wrapper over a normal dynamic component. We use an asSection prop to control the style of the Section. If no asSection prop passed, the dynamic component will be rendered directly.

Default value for asSection

Here is the default value for the asSection prop:
{
  title: '',
  withContainer: false,
  fullWidth: false,
  paddingTop: 40,
  paddingBottom: 40,
  borderTop: false,
  borderBottom: false,
  backgroundColor: 'white',
}

Properties in asSection

Here is the doc for asSection:
{
  // Title shown above the component
  title?: string, 
  // Add another inner container to make the content align
  withContainer?: boolean;
  // Set the outer container width as wide as the full window width.
  fullWidth?: boolean;
  // Top space, to control space between two sections and backgroundColor range.
  paddingTop?: number;
  // Bottom space, to control space between two sections and backgroundColor range.
  paddingBottom?: number;
  // Top border, to add a separator line between two sections.
  borderTop?: boolean;
  // Bottom border, to add a separator line between two sections.
  borderBottom?: boolean;
  // Background color, pre-defined theme colors and raw css colors are supported
  backgroundColor?: string;
}

Colors in backgroundColor

Our pre-defined colors (recommended) are:
black
#0D202F
black80
rgba(13, 32, 47, 0.8)
black60
rgba(13, 32, 47, 0.6)
black40
rgba(13, 32, 47, 0.4)
black20
rgba(13, 32, 47, 0.2)
black10
rgba(13, 32, 47, 0.1)
white
#fff
white80
rgba(255, 255, 255, 0.8)
white60
rgba(255, 255, 255, 0.6)
white40
rgba(255, 255, 255, 0.4)
white20
rgba(255, 255, 255, 0.2)
white10
rgba(255, 255, 255, 0.1)
primaryXd
#F43543
primaryD
#F4505D
primary
#F4505D
primaryM
#F27781
primaryL
#F99DA4
primaryXl
#FFE3E5
grayXd
#3B4F60
grayXd60
rgba(59, 79, 96, 0.6)
grayXd50
rgba(59, 79, 96, 0.5)
grayXd40
rgba(59, 79, 96, 0.4)
grayXd30
rgba(59, 79, 96, 0.3)
grayXd20
rgba(59, 79, 96, 0.2)
grayXd10
rgba(59, 79, 96, 0.1)
grayD
#6B7A86
grayD60
rgba(107, 122, 134, 0.6)
grayM
#A5AEB5
grayL
#CAD0D4
grayPanelShadow
#CCC
grayPageBackground
#F1F4F6
grayXl
#F5F6F7
grayLightBorder
#D7DBDD
grayExtraLightBorder
#E0E5E8
grayUltraLightBorder
#E4E7E9
grayLightBackground
#F1F4F6
secondaryXd
#114661
secondaryD
#3D7591
secondaryM
#70A7C4
secondaryL
#7DBAD8
secondaryXl
#E0F1FA

svgFill
#0D202F
onlineGreen
#8CC049

This might be outdated, check the code for latest theme
Click here to see raw css color names

Different Scenarios

Here, we use LinkButton as the demo component, you can replace LinkButton with any other dynamic component we list below and apply the asSection prop on it. backgroundColor is added in each example just to demo the scope of a section.

With title short cut

```marksy
h(LinkButton, { asSection: 'String Short Cut for asSection' })
```

String Short Cut for asSection

Control the paddings

```marksy
h(LinkButton, { 
  asSection:  {
    paddingTop: 0,
    paddingBottom: 100,
  }
})
```

Make two sections look like one

```marksy
h(LinkButton, { 
  asSection:  {
    paddingBottom: 0,
  }
})
```
```marksy
h(LinkButton, { 
  asSection:  {
    paddingTop: 0,
  }
})
```

Add a border between two sections

```marksy
h(LinkButton, { 
  asSection:  {
    borderBottom: true,
  }
})
```
```marksy
h(LinkButton, { 
  asSection:  {
  }
})
```


Big Notice again: we don’t recommend using dynamic components inside articles. Please only use them in markdowns. This article is just for demo usage. You can use it, but it might need extra engineering work if the style of the dynamic components doesn’t work in articles.
You might have noticed, the backgroundColor, paddingTop, paddingBottom, borderTop and borderBottom here are all inside the article.
The fullWidth examples are under the author card here. Notice that the code blocks not decorated like article because our Markdown renderer doesn’t support it for now.

Full width with container

```marksy
h(LinkButton, { 
  asSection:  {
    title: "Full width with container",
    fullWidth: true,
    withContainer: true,
    backgroundColor: 'grayPageBackground',
  }
})
```

Full width with container

Full width without container

```marksy
h(CarInsuranceBottomWidget, { 
  asSection:  {
    fullWidth: true,
    paddingBottom: 0,
  }
})
```

// Notice: Don't use `title` without `withContainer`. 

Easiest way to compare and buy car insurance

√
No long forms
√
No spam or unwanted phone calls
√
Quotes from top insurance companies

Different background for two neighbouring sections

```marksy
h(LinkButton, { 
  asSection:  {
    fullWidth: true,
    withContainer: true,
    backgroundColor: 'grayLightBackground',
  }
})
```
```marksy
h(LinkButton, { 
  asSection:  {
    fullWidth: true,
    withContainer: true,
    backgroundColor: 'grayL',
  }
})
```


Dynamic Components

All these dynamic components are rendered in a predefined asSection to make them look like the design spec. You can customize it as you want, but you’d better know what does it mean before doing this.

LinkButton

```marksy
h(LinkButton, {
  link: '/advice',
  withHost: true,
  asSection: {
    paddingBottom: 64,
  },
}, 'View all advice')
```

FeaturedArticleGrid

```marksy
h(FeaturedArticleGrid, { 
  asSection: { 
    title: 'Read advice from our car experts', 
    paddingBottom: 80, 
  },
})
```

FeaturedQuestionGrid

```marksy
h(FeaturedQuestionGrid, {
  asSection: {
    title: 'Browse questions from our car experts',
    paddingBottom: 80,
  },
})
```

StaticTopicLinkList & LinkButton

```marksy
h(StaticTopicLinkList, {
  asSection: {
    title: 'Browse by topics',
    paddingTop: 64,
    paddingBottom: 0,
    backgroundColor: '#F5F6F7',
    withContainer: true,
    fullWidth: true,
  },
  tagNames: [
    'Car Cleaning',
    'US States',
    'Car Insurance',
    'American Family',
    'Home Insurance',
    'Car Insurance Companies',
    'Cancellation Policy',
    'Trucks',
    'Driver licenses',
    'Dash cams',
    'Teens',
    'Young Drivers',
    'Car Insurance Rates',
    'Driving Record',
    'Distracted Driving',
    'Road Rules',
    'Car Title',
    'DMV',
    'Road Safety',
    'Self-Driving Cars',
    'Pets',
    'Home Insurance Rates',
    'Switch Car Insurance',
    'Motorcycles',
    'Classic Cars',
  ],
})
```
```marksy
h(LinkButton, {
  asSection: {
    backgroundColor: '#F5F6F7',
    withContainer: true,
    fullWidth: true,
  },
  link: '/advice/tag',
  withHost: true,
}, 'View more topics')
```

RecentArticles & RecentQuestions

```marksy
h(RecentArticles, {
  length: 3,
  asSection: {
    title: 'Read recent articles and questions',
    paddingTop: 100,
    paddingBottom: 0,
  },
})
```
```marksy
h(RecentQuestions, {
  count: 3,
  category: 'Car Insurance',
  asSection: {
    paddingTop: 20,
    paddingBottom: 100,
  },
})
```

CarInsuranceBottomWidget

```marksy
h(CarInsuranceBottomWidget, {
  noMargin: true,
  asSection: {
    fullWidth: true,
    paddingTop: 0,
    paddingBottom: 0,
  },
})
```

Easiest way to compare and buy car insurance

√
No long forms
√
No spam or unwanted phone calls
√
Quotes from top insurance companies

StaticStateMakeLinkList

```marksy
h(StaticStateMakeLinkList,
    {
        asSection: { 
           title: 'Let Jerry find you the lowest for car insurance quote in 45 seconds',
           withContainer: true,
           fullWidth: true,
           paddingBottom: 128,
           paddingTop: 56,
           backgroundColor: '#F5F6F7',
        },
        title: 'Let Jerry find you the lowest for car insurance quote in 45 seconds',
        quoteStates: ['FL', 'TX', 'NY', 'CA', 'NC'],
        costCarMakes:['Toyota', 'Ford', 'Honda', 'Chevrolet', 'Dodge'],
        cheapestInStates:['New Jersey', 'Georgia', 'Pennsylvania', 'Arizona', 'Chio']
    }
)
```

RelatedArticles

```marksy
h(RelatedArticles, {
  asSection: {
    title: 'Related Articles',
    paddingTop: 72,
    paddingBottom: 72,
  },
})
```

RelatedQuestions

```marksy
h(RelatedQuestions, {
  asSection: {
    title: 'What others are asking',
    paddingTop: 72,
    paddingBottom: 72,
  },
})
```

InternalLinkList[category="carMakes"]

```marksy
h(InternalLinkList, {
  asSection: {
    title: 'Compare Car Insurance for Your Car',
    paddingTop: 56,
    paddingBottom: 64,
    fullWidth: true,
    withContainer: true,
  },
  category: 'carMakes',
  format: '${title} insurance cost',
})
```

InternalLinkList[category="states"]

```marksy
h(InternalLinkList, {
  asSection: {
    title: 'Compare Car Insurance for Your State',
    paddingTop: 56,
    paddingBottom: 64,
    fullWidth: true,
    withContainer: true,
    backgroundColor: 'grayPageBackground',
  },
  category: 'states',
  format: 'Car insurance quotes in ${title}',
})
```

InternalLinkList[category="tags"]

```marksy
h(InternalLinkList, {
  asSection: {
    title: 'Browse by topics',
    paddingTop: 56,
    paddingBottom: 64,
    borderTop: true,
    fullWidth: true,
    withContainer: true,
  },
  category: 'tags',
})
```

Browse by topics