Callouts and Cards

Callouts and Cards

Review

In order to create Sections / Cards using Callouts , there’s some Notion iteration that has been made on the CSS code of your site, so it can be easy to create them. Have in mind that Buttons will also work with this.

Instructions

  1. Create a callout
  2. Icons and titles from the Callouts will always be disabled, so leave them blank and use a default icon
  3. I recommend using the circle emojis to match the color of the Section / Callout (⚪⚫🔴🟠🟡🟢🔵🟣)

  4. Give them a background color
    • Red color will turn it into → Red background
    • Brown color will turn it into → LightGray background
    • Gray color will turn it into → White
    • Default color will turn it into → LightGray background

This is a Default section

A “section” is a main callout that has inside all the content information such as additional callouts, rich text, images, and basically any other Notion block available.

🔴

image

Red card = Red

Tortor cras quisque natoque velit ut eu sodales turpis tincidunt tempor aliquet purus arcu ornare interdum, ac nascetur integer malesuada dictum feugiat varius in conubia suspendisse justo nostra tellus maecenas. Mi laoreet montes ridiculus blandit curabitur congue ullamcorper eget varius

🟤

image

Brown callout = LightGray

Tortor cras quisque natoque velit ut eu sodales turpis tincidunt tempor aliquet purus arcu ornare interdum, ac nascetur integer malesuada dictum feugiat varius in conubia suspendisse justo nostra tellus maecenas. Mi laoreet montes ridiculus blandit curabitur congue ullamcorper eget varius

image

Default card = LightGray

Tortor cras quisque natoque velit ut eu sodales turpis tincidunt tempor aliquet purus arcu ornare interdum, ac nascetur integer malesuada dictum feugiat varius in conubia suspendisse justo nostra tellus maecenas. Mi laoreet montes ridiculus blandit curabitur congue ullamcorper eget varius

image

Gray card = White

Tortor cras quisque natoque velit ut eu sodales turpis tincidunt tempor aliquet purus arcu ornare interdum, ac nascetur integer malesuada dictum feugiat varius in conubia suspendisse justo nostra tellus maecenas. Mi laoreet montes ridiculus blandit curabitur congue ullamcorper eget varius

🔴

Red section

A “section” is a main callout that has inside all the content information such as additional callouts, rich text, images, and basically any other Notion block available.

Default card

Tortor cras quisque natoque velit ut eu sodales turpis tincidunt tempor aliquet purus arcu ornare interdum, ac nascetur integer malesuada dictum feugiat varius in conubia suspendisse justo nostra tellus maecenas. Mi laoreet montes ridiculus blandit curabitur congue ullamcorper eget varius

Gray section

A “section” is a main callout that has inside all the content information such as additional callouts, rich text, images, and basically any other Notion block available.

Brown card

Tortor cras quisque natoque velit ut eu sodales turpis tincidunt tempor aliquet purus arcu ornare interdum, ac nascetur integer malesuada dictum feugiat varius in conubia suspendisse justo nostra tellus maecenas. Mi laoreet montes ridiculus blandit curabitur congue ullamcorper eget varius

Default section

A “section” is a main callout that has inside all the content information such as additional callouts, rich text, images, and basically any other Notion block available.

White card

Tortor cras quisque natoque velit ut eu sodales turpis tincidunt tempor aliquet purus arcu ornare interdum, ac nascetur integer malesuada dictum feugiat varius in conubia suspendisse justo nostra tellus maecenas. Mi laoreet montes ridiculus blandit curabitur congue ullamcorper eget varius