It seems like everyone is using TikTok these days! The main draw of the platform is its sheer size – with over 1.5 billion users worldwide TikTok can provide almost any brand with an engaged audience, in whatever niche your product or service falls into. TikTok is now the 5th most used social media site, rivalling well-established giants like Facebook and Instagram.
With average users spending 95 minutes per day on TikTok, but only 26% of advertisers currently utilising the platform– it’s a no-brainer to take advantage of this marketing opportunity.
1
Adidas
2
Apple
3
Coca Cola
4
McDonald’s
5
Nike
6
Samsung
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-two-column-list {
padding-top: rem-calc(40);
padding-bottom: rem-calc(40);
@include bp($lg){
padding-top: rem-calc(92);
padding-bottom: rem-calc(92);
}
&__heading{
margin-bottom: rem-calc(44);
}
&__content-container{
height: 100%;
position: relative;
margin-bottom: rem-calc(24);
@include bp($lg){
margin-bottom: 0;
}
&:has(img) {
@include bp($lg){
padding-bottom: 330px;
}
}
p{
img{
width: 100%;
height: auto;
object-fit: cover;
border-radius: rem-calc(20);
}
&:has(img){
@include bp($lg){
position: absolute;
left: 0;
bottom: 0;
}
}
}
.tick-list{
margin-bottom: rem-calc(24) !important;
}
}
&__numbers-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1.5rem;
row-gap: rem-calc(32);
@include bp(lg){
gap: rem-calc(44);
}
&-item{
width: calc(50% - 12px);
&-number{
font-size: clamp(rem-calc(40), 5vw, rem-calc(80));
font-weight: 600;
margin-bottom: 0;
}
&-content{
font-size: clamp(rem-calc(18), 2.5vw, rem-calc(26));
margin-bottom: 0;
font-weight: 600;
}
}
}
&__column{
&-left, &-right{
display: flex;
flex-direction: column;
gap: rem-calc(32);
@include bp(lg){
gap: rem-calc(44);
}
}
}
}
class Example {
/**
* Create and initialise objects of this class
* @param {object} block
*/
constructor(block) {
this.block = block;
this.init();
}
init() {
//
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-list-two-column').forEach( block => new Example(block) );
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/two-column-list",
"title": "Two column list",
"description": "Two column list block",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-two-column-list.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": true,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Two column list",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/two-column-list/block-two-column-list.css"
}