Skip to main content

Выноски, уведомления, замечания

Вариант 1.

Для оформления блока выноски, уведомления, замечания применяется следующая конструкция:

<div class="call-out">
    <p><strong>Прием заявлений осуществляется:</strong></p>
    <ul class="check">
        <li>Понедельник: 08:30 до 18:00</li>
        <li>Вторник- пятница: 08:30 до 17:00</li>
        <li>Обед: 12:30 – 14:00</li>
    </ul>
    <p>class="callout"</p>
</div>

получим вот такой блок:

Прием заявлений осуществляется:
  • Понедельник: 08:30 до 18:00
  • Вторник- пятница: 08:30 до 17:00
  • Обед: 12:30 – 14:00

Мы можем разнообразить наш блок цветовыми решениями, для этого в класс class="call-out" необходимо добавить класс с обозначением цвета например: class="call-out success"

  • success - зеленый цвет
  • danger - красный цвет
  • info - синий цвет
  • warning - оранжевый цвет

например:

class="callout success"
class="callout danger"
class="callout info"
class="callout warning"

Вариант 2.

Для оформления блока выноски, уведомления, замечания второго варианта применяется следующая конструкция:

<div class="alerte">
    <p><strong>Прием заявлений осуществляется:</strong></p>
    <ul class="check">
        <li>Понедельник: 08:30 до 18:00</li>
        <li>Вторник- пятница: 08:30 до 17:00</li>
        <li>Обед: 12:30 – 14:00</li>
    </ul>
    <p>class="alerte background color aborder"</p>
</div>

Пример:

Прием заявлений осуществляется:
  • Понедельник: 08:30 до 18:00
  • Вторник- пятница: 08:30 до 17:00
  • Обед: 12:30 – 14:00

Вариант 2 можно значительно разнообразить:

  • добавить цвет:
    • серый цвет - class="alerte color"
    • синий цвет - class="alerte info color"
    • оранжевый цвет - class="alerte warning color"
    • зелёный цвет - class="alerte succes color"
    • красный цвет - class="alerte danger color"
  • добавить фон:
    • серый цвет фона - class="alerte background"
    • синий цвет фона - class="alerte info background"
    • оранжевый цвет фона - class="alerte warning background"
    • зелёный цвет фона - class="alerte succes background"
    • красный цвет фона - class="alerte danger background"
  • добавить бордюр:
    • серый цвет бордюра - class="alerte aborder"
    • синий цвет бордюра - class="alerte info aborder"
    • оранжевый цвет бордюра - class="alerte warning aborder"
    • зелёный цвет бордюра - class="alerte succes aborder"
    • красный цвет бордюра - class="alerte danger aborder"

Пример:

class="alerte aborder"
тут мы просто добавили бордюр

class="alerte info color"
тут мы добавили синий цвет и окрасили текст

class="alerte warning background"
тут мы добавили оранжевый цвет и добавили подложку

class="alerte succes aborder"
тут мы добавили зелёный цвет и бордюр

class="alerte danger background color aborder"
тут мы добавили красный цвет, подложку, цвет текста и бордюр

Не забываем в поле подключаемые стили css вставить код CSS:

/* Выноска вариант 1 */
.callout {
  border-left: 3px solid var(--alerte-border-color);
  border-inline-start: 3px solid var(--alerte-border-color);
  border-inline-end: none;
  background-color: var(--alerte-background);
  padding: 1em;
  display: block;
  position: relative;
  overflow: auto;
  font-style: italic;

  &.success {
    border-color: var(--success-border-color);
    background-color: var(--succes-background);
    color: var(--success-color);
  }

  &.danger {
    border-color: var(--danger-border-color);
    background-color: var(--danger-background);
    color: var(--danger-color);
  }

  &.info {
    border-color: var(--info-border-color);
    color: var(--info-color);
    background-color: var(--info-background);
  }

  &.warning {
    border-color: var(--warning-border-color);
    background-color: var(--warning-background);
    color: var(--warning-color);
  }

  & a {
    color: inherit;
    text-decoration: underline;
  }
}

/* Выноска вариант 2 */
.alerte {

display: flex;
align-items: stretch;
flex-direction: column;
justify-content: center;
position: relative;
padding: 1em 0.5em 1em 3em;
margin: 1em 0.5em 1em 2em;
min-height: 60px;
border-radius: 0.3em;
font-style: italic;

& p,
&~p {
text-indent: 0;
}

& ul,
& ol {

&.upper-roman,
&.middle-dash,
&.check,
&.lower-cyrillic,
&.upper-cyrillic {
margin-top: 0;
margin-bottom: 0;

&>li {
line-height: auto;
border-bottom: none;
padding-bottom: 0;
padding-top: 0;
}
}
}

&.background {
background: var(--alerte-background);
}

&.color {
color: var(--text-color);
}

&.aborder {
border: 1px solid var(--alerte-border-color);
}

&::before {
content: "";
position: absolute;
left: -32px;
top: 4px;
background: var(--white-color);
background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' id='Слой_1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48'%3E
%3Cpath d='M24,0C10.8,0,0,10.8,0,24s10.8,24,24,24s24-10.8,24-24S37.2,0,24,0z M26.4,36h-4.8V21.6h4.8V36z M26.4,16.8
h-4.8V12h4.8V16.8z' fill='hsl(0, 0%25, 73%25)'/%3E %3C/svg%3E");
height: 48px;
width: 48px;
border: 6px solid var(--white-color);
border-radius: 2em;
}

&.info {
&.background {
background: var(--info-background);
}

&.color {
color: var(--info-color);
}

&.aborder {
border: 1px solid var(--info-border-color);
}

&::before {
background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48'%3E
%3Cpath d='M24,0C10.8,0,0,10.8,0,24s10.8,24,24,24s24-10.8,24-24S37.2,0,24,0z M26.4,36h-4.8V21.6h4.8V36z M26.4,16.8
h-4.8V12h4.8V16.8z' fill='hsl(237, 65%25, 27%25)'/%3E %3C/svg%3E");
}
}

&.warning {
&.background {
background: var(--warning-background);
}

&.color {
color: var(--warning-color);
}

&.aborder {
border: 1px solid var(--warning-border-color);
}

&::before {
background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48'%3E
%3Cpath d='M24,0C10.8,0,0,10.8,0,24s10.8,24,24,24s24-10.8,24-24S37.2,0,24,0z M26.4,36h-4.8V21.6h4.8V36z M26.4,16.8
h-4.8V12h4.8V16.8z' fill='hsl(26, 100%25, 22%25)'/%3E %3C/svg%3E");
}
}

&.succes {
&.background {
background: var(--succes-background);
}

&.color {
color: var(--succes-color);
}

&.aborder {
border: 1px solid var(--success-border-color);
}

&::before {
background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48'%3E
%3Cpath d='M24,0C10.8,0,0,10.8,0,24s10.8,24,24,24s24-10.8,24-24S37.2,0,24,0z M26.4,36h-4.8V21.6h4.8V36z M26.4,16.8
h-4.8V12h4.8V16.8z' fill='hsl(123, 79%25, 11%25)'/%3E %3C/svg%3E");
}
}

&.danger {
&.background {
background: var(--danger-background);
}

&.color {
color: var(--danger-color);
}

&.aborder {
border: 1px solid var(--danger-color);
}

&::before {
background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48'%3E
%3Cpath d='M24,0C10.8,0,0,10.8,0,24s10.8,24,24,24s24-10.8,24-24S37.2,0,24,0z M26.4,36h-4.8V21.6h4.8V36z M26.4,16.8
h-4.8V12h4.8V16.8z' fill='hsl(0, 78%25, 47%25)'/%3E %3C/svg%3E");
}
}
}

Back to top