Blogs: Blog Post Slider

Before getting started learn the basics:

How to create & edit blogs How to add blog posts to a page See all available template options

Layout Views

The widget component template

Learn how to do it:

Expand All

Add Blog widget to a page
Within the edit view of a page, you can add the blog post widget and display blog posts.
1. On the right side menu, click the Content tab, click the Content drop down menu and find the Blog posts widget. Click, hold and drag the Blog post widget onto the desired part of the page, and then release the blog post widget.
Select the blog post list template (layout)
Within the edit view of a page, you can customize how blog posts display.
1. After you have added the blog post widget to a page, click the Edit button on the widget
2. Under the List settings tab, select the list template. Learn more about the available templates.

Blog Post Slider

Default Title

Default Summary with no background image and the default button shown below

Read More
Default Title

Default Summary with no background image and the default button shown below

Read More
Default Title

Default Summary with no background image and the default button shown below

Read More
Default Title

Default Summary with no background image and the default button shown below

Read More
Default Title

Default Summary with no background image and the default button shown below

Read More

Customizations

Customize with CSS Classes.

Learn how to do it:

Expand All

Customize Blog slider with CSS
Within the edit view of a blog post, CSS classes can be applied to affect the look of the individual slide, image, or content of a blog post.
Under the Custom fields section add classes to the Blog Slide Custom CSS field. Multiple CSS classes can be added but must be separated by a space. CSS classes can be found below.
Blog slide CSS classes
Classes with "sm" text will only affect small screens (smaller than 640px).
Classes with "md" text will only affect medium screens (641px to 1007px).
Classes with "lg" text will only affect large screens (1008px and larger).
Card overlay color
- uk-overlay-default (White transparent background)
- uk-overlay-primary (Dark transparent background)
Card overlay placement
uk-position-top
uk-position-left
uk-position-right
uk-position-bottom
uk-position-center
uk-position-top-left
uk-position-top-center
uk-position-top-right
uk-position-center-left (default)
uk-position-center-right
uk-position-bottom-left
uk-position-bottom-center
uk-position-bottom-right
Slide Background Image Handling
img-fill
img-sm-fill
img-md-fill
img-lg-fill
img-contain
img-sm-contain
img-md-contain
img-lg-contain
img-cover (default)
img-sm-cover
img-md-cover
img-lg-cover
img-hide
Content title text size, style and heading structure
title-h1 (default)
title-sm-h1
title-md-h1
title-lg-h1
title-h2
title-sm-h2
title-md-h2
title-lg-h2
title-h3
title-sm-h3
title-md-h3
title-lg-h3
title-h4
title-sm-h4
title-md-h4
title-lg-h4
title-h5
title-sm-h5
title-md-h5
title-lg-h5
title-h6
title-sm-h6
title-md-h6
title-lg-h6
title-hide
Content summary text size
summary-large
summary-sm-large
summary-md-large
summary-lg-large
summary-medium (default)
summary-sm-medium
summary-md-medium
summary-lg-medium
summary-small
summary-sm-small
summary-md-small
summary-lg-small
summary-hide
Content text alignment
- text-left (default)
- text-right
- text-center
Content text color options
content-red
content-gray
content-gray-light
content-white (default)
content-black
content-blue
content-blue-light
content-teal
content-teal-light
content-orange
content-orange-light
content-green
content-green-light
content-gray-1
content-gray-2
content-gray-3
content-gray-4
content-gray-5
content-gray-6
content-gray-7
content-gray-8
content-gray-9
content-gray-a
content-gray-b
content-gray-c
content-gray-d
content-gray-e
Card Overlay width (%-based)
content-width-30
content-width-sm-30
content-width-md-30
content-width-lg-30
content-width-40
content-width-sm-40
content-width-md-40
content-width-lg-40
content-width-50 (default)
content-width-sm-50
content-width-md-50
content-width-lg-50
content-width-60
content-width-sm-60
content-width-md-60
content-width-lg-60
content-width-70
content-width-sm-70
content-width-md-70
content-width-lg-70
content-width-80
content-width-sm-80
content-width-md-80
content-width-lg-80
content-width-90
content-width-sm-90
content-width-md-90
content-width-lg-90
content-width-100
content-width-sm-100
content-width-md-100
content-width-lg-100
Button text options
btn-read-more (default)
btn-read-article
btn-learn-more
btn-find-out-more
btn-hide
Button color and size options
btn-default (default)
btn-red
btn-gray
btn-gray-light
btn-white
btn-black
btn-blue
btn-orange
btn-green
btn-purple
btn-teal
btn-coolgray3
btn-primary
btn-secondary
btn-info
btn-danger
btn-warning
btn-success
btn-large
btn-small
btn-block
Background color + gradients
red-bg
gray-bg (default)
gray-light-bg
gray-mid-bg
gray-dark-bg
blue-bg
blue-light-bg
teal-bg
teal-light-bg
orange-bg
orange-light-bg
black-bg
white-bg
gray-1-bg
gray-2-bg
gray-3-bg
gray-4-bg
gray-5-bg
gray-6-bg
gray-7-bg
gray-8-bg
gray-9-bg
gray-a-bg
gray-b-bg
gray-c-bg
gray-d-bg
gray-e-bg
bg-gradiant (default)
bg-gradiant-horizontal
bg-gradiant-diagonal
bg-gradiant-bright
bg-gradiant-bright-horizontal
bg-gradiant-bright-diagonal

Card

Card Color:

Examples below also use uk-position-center and btn-hide

Dark Card:

Class: uk-overlay-primary
Light Card:

Class: uk-overlay-default
No Card:

Default setting
Dark Card:

Class: uk-overlay-primary
Light Card:

Class: uk-overlay-default
No Card:

Default setting
Dark Card:

Class: uk-overlay-primary

All Card Overlay Classes
Dark	Light	No Card*
uk-overlay-primary	uk-overlay-default	No class required

* Default setting without a class applied

Card Position:

Examples below also use uk-overlay-primaryandbtn-hide

Top-Center Card:

Class: uk-position-top-center
Left Card:

Class: uk-position-left
Bottom-Right Card:

Class: uk-position-bottom-right
Top-Center Card:

Class: uk-position-top-center
Left Card:

Class: uk-position-left
Bottom-Right Card:

Class: uk-position-bottom-right
Top-Center Card:

Class: uk-position-top-center

All Card Position Classes
Top	Bottom	Left	Right	Center
uk-position-top	uk-position-bottom	uk-position-left	uk-position-right	uk-position-center
uk-position-top-left	uk-position-bottom-left	uk-position-top-left	uk-position-top-right	uk-position-center-left
uk-position-top-center	uk-position-bottom-center	uk-position-center-left *	uk-position-center-right	uk-position-bottom-center
uk-position-top-right	uk-position-bottom-right	uk-position-bottom-left	uk-position-bottom-right	uk-position-center-right

* Default setting without a class applied

Card Width:

Examples below also use uk-overlay-primaryanduk-position-center and btn-hide

70% Card Width:

Class: content-width-70
100% Card Width:

Class: content-width-100
50% Card Width:

Default Setting
70% Card Width:

Class: content-width-70
100% Card Width:

Class: content-width-100
50% Card Width:

Default Setting
70% Card Width:

Class: content-width-70

All Card Width Classes for Specific Screen Sizes
Percentage	All Sizes	Small, ≥640px wide	Medium, ≥960px wide	Large, ≥1200px wide
30%	content-width-30	content-width-sm-30	content-width-md-30	content-width-lg-30
40%	content-width-40	content-width-sm-40	content-width-md-40	content-width-lg-40
50%*	content-width-50	content-width-sm-50	content-width-md-50	content-width-lg-50
60%	content-width-60	content-width-sm-60	content-width-md-60	content-width-lg-60
70%	content-width-70	content-width-sm-70	content-width-md-70	content-width-lg-70
80%	content-width-80	content-width-sm-80	content-width-md-80	content-width-lg-80
90%	content-width-90	content-width-sm-90	content-width-md-90	content-width-lg-90
100%	content-width-100	content-width-sm-100	content-width-md-100	content-width-lg-100

* Default setting without a class applied

Background Options

Image Options:

Examples below also use uk-overlay-primaryand uk-position-centerand btn-hide

Contain Image:

Class: img-contain
Fill Image:

Class: img-fill
Cover Image:

Default Setting
Contain Image:

Class: img-contain
Fill Image:

Class: img-fill
Cover Image:

Default Setting
Contain Image:

Class: img-contain

All Image Fill Classes for Specific Screen Sizes
Image Fill	All Sizes	Small, ≥640px wide	Medium, ≥960px wide	Large, ≥1200px wide
Fill Image*	img-fill	img-sm-fill	img-md-fill	img-lg-fill
Contain Image	img-contain	img-sm-contain	img-md-contain	img-lg-contain
Cover Image	img-cover	img-sm-cover	img-md-cover	img-lg-cover

* Default setting without a class applied

Background Color:

Examples below also use uk-overlay-primaryand uk-position-centerand btn-hide

Red Background:

Class: red-bg
Teal Background:

Class: teal-bg
Blue Background with a Diagonal Gradiant:

Classes: blue-bg bg-gradiant-diagonal
Red Background:

Class: red-bg
Teal Background:

Class: teal-bg
Blue Background with a Diagonal Gradiant:

Classes: blue-bg bg-gradiant-diagonal
Red Background:

Class: red-bg

See All Background Color Classes and Best Practices

Content Options

Title Heading:

Examples below also use uk-overlay-primaryand uk-position-centerand btn-hide

H3 Heading:

Class: title-h3
H4 Heading:

Class: title-h4
H2 Heading:

Class: title-h2
H3 Heading:

Class: title-h3
H4 Heading:

Class: title-h4
H2 Heading:

Class: title-h2
H3 Heading:

Class: title-h3

All Title Heading Classes for Specific Screen Sizes
Heading	All Sizes	Small, ≥640px wide	Medium, ≥960px wide	Large, ≥1200px wide
h1*	title-h1	title-sm-h1	title-md-h1	title-lg-h1
h2	title-h2	title-sm-h2	title-md-h2	title-lg-h2
h3	title-h3	title-sm-h3	title-md-h3	title-lg-h3
h4	title-h4	title-sm-h4	title-md-h4	title-lg-h4
h5	title-h5	title-sm-h5	title-md-h5	title-lg-h5
h6	title-h6	title-sm-h6	title-md-h6	title-lg-h6
Hide Title	title-hide

* Default setting without a class applied

Summary Font Size:

Examples below also use uk-overlay-primaryand uk-position-centerand btn-hide

Medium Summary:

Class: summary-medium
Large Summary:

Class: summary-large
Small Summary:

Class: summary-small
Medium Summary:

Class: summary-medium
Large Summary:

Class: summary-large
Small Summary:

Class: summary-small
Medium Summary:

Class: summary-medium

All Summary Size Classes for Specific Screen Sizes
Heading	All Sizes	Small, ≥640px wide	Medium, ≥960px wide	Large, ≥1200px wide
Small	summary-small	summary-sm-small	summary-md-small	summary-lg-small
Medium*	summary-medium	summary-sm-medium	summary-md-medium	summary-lg-medium
Large	summary-large	summary-sm-large	summary-md-large	summary-lg-large
Hide Summary	summary-hide

* Default setting without a class applied

Button Color:

Examples below also use uk-overlay-primaryand uk-position-center

Blue Button:

Class: btn-blue

Read More
Red Button:

Class: btn-red

Read More
Teal Button:

Class: btn-teal

Read More
Blue Button:

Class: btn-blue

Read More
Red Button:

Class: btn-red

Read More
Teal Button:

Class: btn-teal

Read More
Blue Button:

Class: btn-blue

Read More

All Button Color Classes
btn-default*	btn-red	btn-gray	btn-gray-light	btn-white
btn-black	btn-blue	btn-orange	btn-green	btn-teal
btn-coolgray3	btn-primary	btn-secondary	btn-info	btn-danger
btn-warning	btn-success

* Default setting without a class applied

Button Size:

Examples below also use uk-overlay-primaryand uk-position-center

Large Button:

Class: btn-lg

Read More
Block Button:

Class: btn-block

Read More
Small Button:

Class: btn-small

Read More
Large Button:

Class: btn-lg

Read More
Block Button:

Class: btn-block

Read More
Small Button:

Class: btn-small

Read More
Large Button:

Class: btn-lg

Read More

All Button Size Classes
btn-small	btn-large	btn-block

Button CTA Text:

Examples below also use uk-overlay-primaryand uk-position-center

Learn More Button:

Class: btn-learn-more

Learn More
Find Out More Button:

Class: btn-find-out-more

Find Out More
Read Article Button:

Class: btn-read-article

Read Article
Learn More Button:

Class: btn-learn-more

Learn More
Find Out More Button:

Class: btn-find-out-more

Find Out More
Read Article Button:

Class: btn-read-article

Read Article
Learn More Button:

Class: btn-learn-more

Learn More

All Button CTA Classes
btn-read-more*	btn-read-article	btn-learn-more	btn-find-out-more	btn-hide

* Default setting without a class applied

Content Style/Color:

Examples below also use uk-overlay-defaultanduk-position-centerandbtn-hide

Teal Text:

Class: content-teal
Blue Text:

Class: content-blue
Center Text:

Classes: text-center content-black
Teal Text:

Class: content-teal
Blue Text:

Class: content-blue
Center Text:

Classes: text-center content-black
Teal Text:

Class: content-teal

All Content Color Classes
content-red	content-gray	content-gray-light	content-white*	content-black
content-blue	content-blue-light	content-teal	content-teal-light	content-orange
content-orange-light	content-green	content-green-light	content-gray-1	content-gray-2
content-gray-4	content-gray-5	content-gray-6	content-gray-7	content-gray-8
content-gray-9	content-gray-a	content-gray-b	content-gray-c	content-gray-d
content-gray-e

* Default setting without a class applied

All Content Alignment Classes
text-left*	text-right	text-center

* Default setting without a class applied

Stacking CSS Classes

Title Text:

uk-overlay-default uk-position-center-right content-width-70 content-black btn-hide summary-large/code> text-center
Title Text:

uk-overlay-primary uk-position-center content-width-100 content-width-sm-80 content-width-md-60 btn-red btn-learn-more text-center

Learn More
Title Text:

uk-overlay-default uk-position-center-right content-width-70 content-black btn-hide summary-large/code> text-center
Title Text:

uk-overlay-primary uk-position-center content-width-100 content-width-sm-80 content-width-md-60 btn-red btn-learn-more text-center

Learn More
Title Text:

uk-overlay-default uk-position-center-right content-width-70 content-black btn-hide summary-large/code> text-center
Title Text:

uk-overlay-primary uk-position-center content-width-100 content-width-sm-80 content-width-md-60 btn-red btn-learn-more text-center

Learn More